Passing Thoughts Project

I have almost completed this project but there is one issue I am unable to solve. Whenever I press ADD button to insert new thought, new thought gets removed immediately rather than after 15 seconds(although the other thoughts that we used to initialize our thought array get removed after 15 seconds). Any help would be appreciated. Thanks in Advance.
Here is my Thought.js code

import React,{useEffect} from 'react';

export function Thought(props) {
  const { thought, removeThought } = props;

  useEffect(()=>{
    const timeRemaining = thought.expiresAt - Date.now();
    
    const timer = setTimeout(()=>{
      alert("Time passed");
    },timeRemaining)

    return ()=> {clearTimeout(timer)}
  },[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>
  );
}

Here is my AddThoughtForm.js code:

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

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

  const handleTextChange=({target})=>{
    const {value}=target;
    setText(value);
  }

  const handleSubmit=(event)=>{
    event.preventDefault();
    const thought={
      id:generateId(),
      text:text,
      expireAt:getNewExpirationTime()
    }
    if(text.length>0){
      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>
  );
}

Sorry, in this code I am alerting the message rather than removing the thought but the project’s behaviour remains same. When I click Add, alert is produced immediately and not after 15 seconds.

Hello,

You’re really really close. Since you’re having issues with it removing the items immediately (or immediately calling your alert), then it would be a good idea to console.log your timeRemaining variable after you calculate it. That will give you a clue about what’s going on.

Click here if you want more information

The log would show NaN (not a number) because thought.expiresAt is undefined

You can trace back why it’s undefined to your AddThoughtForm component. You’re accidentally setting the expireAt property of the object rather than expiresAt

You didn’t post the rest of the code and I don’t have access to the module anymore, but from what I can tell, that is the only thing holding you back.

1 Like

Thank you for helping me out. That was a silly mistake from my end :unamused: