Everything is working right in terms of adding and deleting toughts, but when I tried to add the useEffect to display the alert after 15 seconds, the alert will not show up. I’m certain the useEffect was correct, unless I am missing something.
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';
export default 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(thoughts.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>
);
}
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()
if (text.length > 0) {
const thought = {
id: generateId(),
text: text,
expiresAt: getNewExpirationTime(),
}
props.addThought(thought)
event.preventDefault()
}
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>
);
}
Thought.js
import React, { useEffect } from 'react';
export function Thought(props) {
const { thought, removeThought } = props;
const handleRemoveClick = () => {
removeThought(thought.id);
};
useEffect(() => {
const timeRemaining = thought.expiresAt - Date.now();
const timeout = setTimeout(() => {
alert('Time has passed!');
}, timeRemaining);
return () => {
clearTimeout(timeout);
};
}, [thought]);
}
return (
<li className="Thought">
<button
aria-label="Remove thought"
className="remove-button"
onClick={handleRemoveClick}
>
×
</button>
<div className="text">{thought.text}</div>
</li>
);
}
