Project Passing Thoughts - bug?

So I have the Project basically working but it has a bug.
The project is supposed to delete chat components containing text (or thoughts) after a set time.
The thoughts are objects with a {id, text, expiresIn} keys.
The bug: All components are deleted after setTimeout.

expected behavior Each component should set its own timer and delete its self afters expiresIn time.

I do not have access to regular debuging because CC uses a virtual browser that does not have access to react components. If no one can spot the bug, I will create this on my local machine but id rather not.

I watched the solution video and the guy never lets the timer delete multiple thoughts… I dont know if he did that on purpose but I was not able to see if this bug was duplicated in his code.

Here is my code I guess. Otherwise can you tell me if the app is supposed to behave like this?

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) => {
    const filteredThoughts = thoughts.filter(thought => !== thoughtIdToRemove);

  return (
    <div className="App">
        <h1>Passing Thoughts</h1>
        <AddThoughtForm addThought={addThought} />
        <ul className="thoughts">
          { => (

ReactDOM.render(<App />, document.getElementById('app'));


import React, { useState } from 'react';
import { generateId, getNewExpirationTime } from './utilities';

export function AddThoughtForm({ addThought }) {

  const [text, setText] = useState('');
  const handleTectChange = (e) => {

  const handleSubmit = (e) => {
    if (text) {
      const thought = {
        id: generateId(),
        expiresAt: getNewExpirationTime()

  return (
    <form className="AddThoughtForm" onSubmit={handleSubmit}>
        aria-label="What's on your mind?"
        placeholder="What's on your mind?"
      <input type="submit" value="Add" />


import React,{ useEffect } from 'react';

export function Thought(props) {

  const { thought, removeThought } = props;

    useEffect(() => {

    const timeRemaining = thought.expiresAt -;

    const timeout = setTimeout(() => {


    }, timeRemaining);

    return ()=> {



  }, [thought]);

  const handleRemoveClick = () => {



  return (

    <li className="Thought">


        aria-label="Remove thought"






      <div className="text">{thought.text}</div>




Hi, I’ve also found that nothing was working on this exercice… Nice to know it’s not just me.

1 Like

In the whole lesson I spotted several bugs too… It may be a too complicated subject for their code editor…

1 Like

Hey seanpausm,
I had the same question. All my thoughts disappear 15 seconds after the first thought on the list was entered, leaving a blank list.
Perhaps something can be done similar to the “thoughtIdToRemove” used for manually removing a targeted thought.
I’ve tried a few things but can’t get the thoughts to expire one by one.

Hi 7982544049,

I find what fixed it for me was running:

  const removeThought = (thoughtIdToRemove) => {
    setThoughts((thoughts) => thoughts.filter(thought => !== thoughtIdToRemove));

over my original:

  const removeThought = (thoughtIdToRemove) => {
    setThoughts(thoughts.filter(thought => {
      return !== thoughtIdToRemove

fixed the issue. I’m not sure why wrapping the filter with in a callback functions prevents that behaviour.

1 Like

makes sense. it would keep the thoughts enclosed in a separate scope, keeping them from resetting.

But does not all thoughts should be deleted after 15 seconds ? That’s why those first 2 thoughts gets deleted too. They get deleted after 15 seconds after you refreshed the browser or you have saved the project

idk mine where just getting deleted immediately.