Passing thoughts can't get delete to work

Language Help React.js
1

So my app was working fine until step 13, I had the alert pop up after 15 seconds and all I had to do was change alert to remove thought… and I broke it. Now it won’t delete at all and I have tried re-writing all the delete functions to no avail so any help on this would be great. Passing thoughts

app

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

thoughts

import React, {useEffect} from 'react';

export function Thought(props) {
  const { thought, removeThought } = props;
  
  useEffect(() => {
    const timesUp = setTimeout(() => {
      removeThought(thought.Id);  
    }, thought.expiresAt - Date.now());

    return () => {
      clearTimeout(timesup)
    };

  }, [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>
  );
}
2

In the useEffect in Thought.js,

// You wrote: 
removeThought(thought.Id); 

// It should be:
removeThought(thought.id); 

// You wrote:
const timesUp = setTimeout(() => {

// You also wrote:
clearTimeout(timesup)

// Is it supposed to be timesUp or is it supposed to be timesup?
1 Like