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

Web Development Full-Stack
1

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

same for me, not even with the video

4

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…

3 Likes
5

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
6

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

8

I’m also having the same trouble. I wacthed the instructors video and my code was the same. I’m not sure whats going wrong.

9

Check line 22, inside addThought function, the correct syntax is:

setThoughts((prev) => [thought, …prev]);

the instructions are wrong

11

Yeah I can’t get this to work even with the proper setThoughts syntax

2 Likes
12

me neither - can we give feedback to codecademy about this

1 Like
13

I was able to get this working the other day. I’d be happy to take a look at your code if you want to share it (or anyone else’s who’s struggling)

1 Like
14

Thank you - Here’s my code up to step 8:

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

AddThoughtForm.js

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) => {
    alert('handleSubmit ran');
    event.preventDefault();

    if (text.length > 0) {
       const thought = {
        id: generateId(),
        text: text,
        expiresAt: getNewExpirationTime()
      };

      props.addThought(thought);

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

put
onSubmit={handleSubmit}
into the form tag!

2 Likes
16

It turns out this was causing an error - i tried to replicate the files locally and got a syntax error using …prev:

 const addThought = (thought) => {
    setThoughts((prev) => [thought, …prev]);
  };

so i changed it to this:

setThoughts(thoughts.concat(thought));

and that worked fine.

17

I have the same problem and after checking the code for several times - it still doesn’t show added thoughts. Anybody can help to fix it?

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

AddThoughtForm.js

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

Thought.js

import React from 'react';

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

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

In your AddThoughtForm.js file,

// In handleSubmit, you wrote:
props.AddThought(thought);

// It should be:
props.addThought(thought);

because in App.js, you have:

<AddThoughtForm addThought={addThought}/>
1 Like
19

Thanks a lot, it helped to solve the issue.

1 Like