I’ve finished the entire project, but after I complete the final step everything crashes. It displays the ‘alert’ message fine, in step 12, the issue only occurs once I implement step 13.
I’ve read through my code a few times and watched the video to check if I’d missed anything, but I’m still stumped.
I’d just like some help on this bug, so I can move on. Thanks.
App.JS
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((prev) => [thought, ...prev]);
};
const removeThought = (thoughtIdToRemove) => {
setThoughts((prev) =>{
prev.filter((thought) => thought.id !== thoughtIdToRemove)
});
};
return (
<div className="App">
<header>
<h1>Passing Thoughts</h1>
</header>
<main>
<AddThoughtForm addThought={addThought} />
<ul className="thoughts">
{thoughts.map((thought) => (
<Thought key={thought.id} thought={thought} removeThought={removeThought} />
))}
</ul>
</main>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
AddThoughtForm.JS
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();
const thought = {
id: generateId(),
text: text,
expiresAt: getNewExpirationTime(),
};
if (text.length > 0) {
props.addThought(thought);
setText('');
}
};
return (
<form className="AddThoughtForm" onSubmit={handleSubmit}>
<input
value={text}
onChange={handleTextChange}
type="text"
aria-label="What's on your mind?"
placeholder="What's on your mind?"
/>
<input type="submit" value="Add" />
</form>
);
}
Thoughts.JS
import React, {useEffect} from 'react';
export function Thought(props) {
const { thought, removeThought } = props;
useEffect(()=>{
const timeRemaining = thought.expiresAt - Date.now();
const timeout = setTimeout(() => {removeThought(thought.id)
}, timeRemaining);
return () => clearTimeout(timeout);
}, [thought]);
const handleRemoveClick = () => {
removeThought(thought.id);
};
return (
<li className="Thought">
<button
aria-label="Remove thought"
className="remove-button"
onClick={handleRemoveClick}
>
×
</button>
<div className="text">{thought.text}</div>
</li>
);
}