Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created April 6, 2021 16:24
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save codecademydev/258823138b30806b50c363d40017de79 to your computer and use it in GitHub Desktop.
Codecademy export
import React, { useState } from 'react';
import { generateId, getNewExpirationTime } from './utilities';
export function AddThoughtForm(props) {
const [text, setText] = useState('');
const handleTextChange = (event) => {
setText(event.target.value)
}
const handleSubmit = (event) => {
event.preventDefault();
if (text.length > 0){
const thought = {
id: generateId(),
text: text,
expiresAt: getNewExpirationTime(),
};
props.addThought(thought);
setText('');
};
};
return (
<form className="AddThoughtForm" onSubmit={handleSubmit}>
<input
type="text"
aria-label="What's on your mind?"
placeholder="What's on your mind?"
value={text}
onChange={handleTextChange}/>
<input type="submit" value="Add" />
</form>
);
}
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { AddThoughtForm } from './AddThoughtForm';
import { Thought } from './Thought';
import { generateId, getNewExpirationTime } from './utilities';
function App() {
const [thoughts, setThoughts] = useState([
{
id: generateId(),
text: 'This is a place for your passing thoughts.',
expiresAt: getNewExpirationTime(),
},
{
id: generateId(),
text: "They'll be removed after 15 seconds.",
expiresAt: getNewExpirationTime(),
},
]);
const addThought = (thought) => {
setThoughts((thoughts) => [thought, ...thoughts])
}
const removeThought = (thoughtIdToRemove)=> {
setThoughts((thoughts) => thoughts.filter((thought) =>
thought.id !== thoughtIdToRemove));
};
return (
<div className="App">
<header>
<h1>Passing Thoughts</h1>
</header>
<main>
<AddThoughtForm value={addThought}/>
<ul className="thoughts">
{thoughts.map((thought) => (
<Thought key={thought.id} thought={thought} removeThought={removeThought} />
))}
</ul>
</main>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment