Unable to add a thought on Passing Thoughts project. Task 6

You must select a tag to post in this category. Please find the tag relating to the section of the course you are on

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-function-components-and-hooks/projects/react-hooks-passing-thoughts

I’m stuck on Task 6. The task that is meant to add the “Add Thought” functionality. I’ve followed the tutorial line for line and there is no change.

I find this error in the console,
Uncaught (in promise) TypeError: UserLeap._queue.unpause is not a function

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((prev) => [thought, ...prev]);

  }

  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} />

          ))}

        </ul>

      </main>

    </div>

  );

}

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

AddThoughtForm.js

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

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

  const handleTextChange = (event) => {
    setText(event.target.value);
  }
  
  const handleSubmit = (event) => {
    event.preventDefault();
    
    const thought = {
        id: generateId(),
        text: text,
        expiresAt: getNewExpirationTime(),
    }
    
    props.addThought(thought);
  }

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

1 Like

same for me, not even with the video

1 Like

Hi, I think that your addThought should look like this :

 const addThought = (thought) => {
    setThoughts(prev => [thought, ...prev])

  }

Except from than I can really spot any issues so far…

1 Like

Thanks Chrisgeek07. I had the same issue when following the examples. The example shows using (thought) => [thought, …thoughts]. Definitely was wrong in the example. I thought it looked weird but since the example had it that way I thought it was right.

2 Likes

No worries, I’m glad this helped.
Happy Coding !