Passing Thoughts Problem

Get Help React.js
#1

I’m almost done with the project, but I can’t add any thoughts. Deleting them is fine, but I don’t know what syntax errors I have that’s throwing me off.

Here’s the project:

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

And my code for 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();

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

};

return (




);
}

#2

I think it’s because you have nothing returned

#3

For some reason when I paste my code some of it disappears.

I’ll try to paste the return here:

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

;

But anyway, when I click Add there doesn’t appear to be any change at all.

#4

Are any error messages shown in the browser’s console when you attempt to add a thought?

I don’t see anything that would prevent a thought from being added in the AddThoughtForm.js file you posted. It may be an issue with the addThought() method in your App.js or perhaps it isn’t being passed as a prop to AddThoughtForm.

#5

Here’s my App.js, but I’m not sure I did anything incorrectly here either:

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((thought) => [thought, …thoughts])
}

const removeThought = (thoughtIdToRemove)=> {
setThoughts((thoughts) => thoughts.filter((thought) =>
thought.id !== thoughtIdToRemove));
};

<div className="App">
  <header>
    <h1>Passing Thoughts</h1>
  </header>
  <main>
    <AddThoughtForm value={addThought}/>
    <ul className="thoughts">
      {thoughts.map((thought) => (
        <Thought key={thought.id} thought={thought} removeThought={removeThought} />
      ))}
    </ul>
  </main>
</div>

);

ReactDOM.render(, document.getElementById(‘app’));

#6

Focus on addThought()

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

This is what’s preventing new thoughts from being added.

Click if you need more hints

Notice that the parameter name is thought and then you’re using thought as the parameter name of your callback function that is passed to setThoughts().

Click if you need examples of how to fix it 
  const addThought = (thought) => {
    setThoughts((thoughts) => [thought, ...thoughts])
  }

// or

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

Notice we are now using a different parameter name for the callback function.

#7

I tried changing it but there’s still no change.

#8

I copy/pasted your App.js and AddThoughtForm.js files to my project, then implemented the fix from my last post.

thoughts

#9

I copied and pasted the function and when I click Add, there is still no difference.

#10

It’s possible while fixing the formatting the forum did that I corrected something else. You responded to the other person that you had a return so I assumed you really did in both files. Your App.js file is missing a return based strictly on what you posted. It’s possible that the Codecademy learning environment is using an old version of your code because it can’t compile a new version due to syntax errors. You might be making changes but not seeing anything new represented in the embedded browser.

Are you returning the JSX in your App.js?

Note: One good way to see if a new version of your code is being used is to change the text of one the thoughts that are automatically added. If it doesn’t change, then Codecademy can’t compile your code.

#11

Yes, I’m returning the JSX.

In the console I’m getting the error: TypeError: props.addThought is not a function. (In ‘props.addThought(thought)’, ‘props.addThought’ is undefined)
handleSubmit — App.compiled.js:50
callCallback — react-16-course-bundle.min.js:1:223378
dispatchEvent
invokeGuardedCallbackDev — react-16-course-bundle.min.js:1:223954
invokeGuardedCallback — react-16-course-bundle.min.js:1:225273
invokeGuardedCallbackAndCatchFirstError — react-16-course-bundle.min.js:1:225401
executeDispatch — react-16-course-bundle.min.js:1:227179
executeDispatchesInOrder — react-16-course-bundle.min.js:1:227631
executeDispatchesAndRelease — react-16-course-bundle.min.js:1:280359
forEachAccumulated — react-16-course-bundle.min.js:1:280244
runEventsInBatch — react-16-course-bundle.min.js:1:280720
runExtractedPluginEventsInBatch — react-16-course-bundle.min.js:1:283146
handleTopLevel — react-16-course-bundle.min.js:1:283900
batchedEventUpdates$1 — react-16-course-bundle.min.js:1:646556
batchedEventUpdates — react-16-course-bundle.min.js:1:233885
dispatchEventForLegacyPluginEventSystem — react-16-course-bundle.min.js:1:284195
attemptToDispatchEvent — react-16-course-bundle.min.js:1:300633
dispatchEvent — react-16-course-bundle.min.js:1:299418
dispatchEvent
unstable_runWithPriority — react-16-course-bundle.min.js:1:890953
discreteUpdates$1 — react-16-course-bundle.min.js:1:646814
discreteUpdates — react-16-course-bundle.min.js:1:234096
dispatchDiscreteEvent — react-16-course-bundle.min.js:1:298858
dispatchDiscreteEvent
rethrowCaughtError — react-16-course-bundle.min.js:1:225647

#12

Has this error message always been in the browser’s console? It was the first question I had asked, but you didn’t say there were when you responded. Trying to determine if there have been other changes along the way that are now showing themselves or if you’re looking for the first time.

Are you passing a prop named addThought to AddThoughtForm?

If you need more help after considering and/or answering the questions above, then we need to get back on the same page with your code. You’ll need to post the GitHub Gist link that you can create by clicking the Tools button in the top-right of your project, and then clicking ‘Create A Gist’

#13

I hadn’t really been checking the console at all for this project until you mentioned it.

I think we’re passing the prop in App.js at the line where we have AddThoughtForm value={addThought} aren’t we?

Here’s the link to the GitHub Gist: https://gist.github.com/258823138b30806b50c363d40017de79

#14 
<AddThoughtForm value={addThought}/>

Based on this, how would you access value from AddThoughtForm?

From within AddThoughtForm, it would be props.value

How are you currently trying to use it from within AddThoughtForm?

You’re trying to use props.addThought from within AddThoughtForm here:

props.addThought(thought);
Click if you need another hint

You’ll need to either change App.js to have:

<AddThoughtForm addThought={addThought}/>

OR you need to change AddThoughtForm.js to have:

props.value(thought);

After making the correction above, you should have a 100% fully working solution. We already corrected the addThought() function yesterday and that is reflected in your Gist link, so we’re good there too.

As you continue your journey, I can’t stress enough how valuable it will be to get into the habit of checking the browser’s console when something isn’t working.

#15

Ohh, I see now. Thanks for your help