Passing Thoughts Became Permanent Thoughts

Web Development Full-Stack
1

Hi everyone.

I nearly completed the passing thoughts project, but the thoughts fail to disappear after 15 seconds. I watched the video and checked my code, but I can’t figure out where I went wrong. Any help is much appreciated.

John

Project link: https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-function-components-and-hooks-a2dba9bf-fc64-4118-8656-dfdc35f9e5cc/projects/react-hooks-passing-thoughts

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

AddThoughtForm.js

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

export function AddThoughtForm(props) {
  const [text, setText] = useState('');
  
  const handleTextChange = ({target}) => setText(target.value); 

  const handleSubmit = (event) => {
    if(text.length) {
    event.preventDefault();
    const thought = {
    id: generateId(),
    text: text,
    expiresAt: getNewExpirationTime ()  
    };
    props.addThought(thought);
    setText('');
    };
  };
  
  return (
    <form className="AddThoughtForm" onSubmit={handleSubmit}>
      <input
        onChange={handleTextChange}
        value={text}
        type="text"
        aria-label="What's on your mind?"
        placeholder="What's on your mind?"
         
      />
      <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(() => {
      removeThought(thought.Id);
    }, timeRemaining)

    return () => {
      clearTimeout(timeout);
    }
}, [thought]);

  return (
    <li className="Thought">
      <button
        aria-label="Remove thought"
        className="remove-button"
        onClick={handleRemoveClick}
      >
        &times;
      </button>
      <div className="text">{thought.text}</div>
    </li>
  );
}
2

What happens if you add a console.log(timeRemaining) in the effect hook?

1 Like
3

In the code snippet highlighted by mirja_t, you wrote:

removeThought(thought.Id);

It should be:

removeThought(thought.id);

because if you look at your other files, you will see that the properties associated with each thought have been named id, text and expiresAt. There is no Id property.

2 Likes
4

Thanks mtrtmk for catching my error. The code works perfectly now.

1 Like
5

Thanks mirja_t for checking out my code. I mistakenly capitalized a passed-in prop (id), which caused my thoughts to become permanent.

-John

2 Likes