Passing Thoughts: thoughts would not be deleted after a countdown

Can someone look through this to see what I did wrong? I even follow the walkthrough after each step to see if I did it right.

//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((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 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'));
//Thoughts.js
import React from 'react';
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}
      >
        &times;
      </button>
      <div className="text">{thought.text}</div>
    </li>
  );
}
//AddThoughtForm.js
import React, {useState} from 'react';
import { generateId, getNewExpirationTime } from './utilities';

export function AddThoughtForm(props) {
const [text, setText] = useState('');

function handleTextChange(event){
  setText(event.target.value);
}

function 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
      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>
  );
}

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.