Passing Thoughts Project step 6 unable to submit form and see new thought

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

Hello

I am unable to see the new thought being added to the form after completing step 6

Any ideas?

Here is my code

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

App.js code as follows:

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) => {
  setThought(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'));

Hello,

Check out the browser’s console for error messages. They can provide crucial clues about what’s going on. The Codecademy learning environment doesn’t always show the compilation issues, but many bugs encountered at runtime will still be in the browser’s console.

Click for more info

In this case, you’re going to see a ReferenceError about setThought not being defined.

Click for another hint

You assigned it to setThoughts, but then called it using setThought:

  const [thoughts, setThoughts] = useState([
    // ...
  ]);

  setThought(prev => [thought, ...prev])

I had the same problem. In App.js in addThought function change setThought to setThoughts.

thank you so much :slightly_smiling_face:

1 Like

thanks for this tip :slightly_smiling_face: