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

in this project i want to activate the function “addThought” by doing all the steps one by one but the method don’t work so this is my the principals files projects :

the app coomponent code :

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

and that’s the addThoughtForm component file 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()
   };
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>
  );
}

and thanks in advance:

Hi,
didi you have a look at the console? I guess it says that addThought is undefined in the addThoughtForm component, right?

i haven’t say what’s the result in the console but that’s exactly the logic.

You defined the addThought function in your App component and it is available there. In the addThoughtForm component it is available as a property of props. So either you destructurize the addThought property or you call the function as a property of props.

so i call it like this “props.addThought(thought)”

Yes, either that or you destructurize it like this:

export function AddThoughtForm({addThought}) {

Any of that should work.

no one of these work.generally thanks for your help.

If I paste your code into my sandbox and correct the issue with the undefined variable with one of the methods described above, it works.
So either the cause of your problem is in none of these components or you have a typo in the assignment of addThought. What did you change?

that’s my “addThought” method inside the app.js file :
‘’’
const addThought = (thought) => {

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

}
‘’’

No I meant what did you change in the addThoughtForm Component? That’s where the error with the undefined variable occurred.
The function itself is fine.

1 Like

thank you my friend. You are always amazing!!!

1 Like