FAQ: The State Hook - Lesson Review

This community-built FAQ covers the “Lesson Review” exercise from the lesson “The State Hook”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn React

FAQs on the exercise Lesson Review

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Hi,

That was a great lesson. I have a question. On line 10 of AppFunction.js (in handleChange handler), why should we use spread syntax like this:

setNewTask((prev) => ({ ...prev, id: Date.now(), [name]: value }));

instead of simply update the state based on user input:

setNewTask(() => ({ id: Date.now(), [name]: value }));

I’m asking this since I think we only need user input here and we are not acting based on previous state, aren’t we?

Thank you

3 Likes

Hi, @imangm.
The component NewTask has two input fields internally: one for title, and one for detail. If you were to omit ...prev , each time you were to switch to a different input field, your form will be reset. To prevent that from happening, you must use ...prev to preserve previously typed input.

1 Like

actaully can you tell me how this works

handleChange({ target }){

const { name, value } = target;

this.setState((prevState) => ({

  ...prevState,

  newTask: {

    ...prevState.newTask,

    [name]: value,

    id: Date.now()

  }

}));

Hi, @dev6573490445.

First of all, check the contents of NewTask.js .(You can find it by clicking the files icon on the left side and navigating to files > Presentational > NewTask.js)
In that file, you’ll see (on line 10 and 18) that both the input tag and the textarea tag use the same event handler handleChange. So, a task has a Title field (which makes use of an input tag and is mandatory) and a Details field (which makes use of a textarea tag and is optional).

So, coming back to the code,
const { name, value } = target;
evaluates to:

const name = event.target.name;
const value = event.target.value;

Now, when the state object is set the first time(i.e when a user types into the title input field, say, “Hello”),
...prevState is empty.
Next is the newTask property which again has ...prevState.newTask . This will be empty for the same reason as mentioned above. Then,
[name]: value
will evaluate to
title:"Hello"
So, to recap, after the user types “Hello”, this is what the state looks like:

state: {
newTask:{
title:"Hello",
id:1604945933064
  }
}

Now, if the user decides to type in the description(Detail) for the task in the textarea field, the state will be updated as follows:
...prevState will copy the contents of the state as it is.
Within the property newTask, ...prevState.newTask will copy the contents of newTask from previous state and then add a new property
description:“description text”
to it and overwrite the id property. If you choose to skip ...prevState.newTask, the title typed by the user will be erased and the task will be reset (the description box is hidden every time the user input is blank)

So, in the end, after the user has typed the description, the state will finally look like:

state: {
newTask: { 
    title: "Hello",
    description:"description text",
    id:167636345411
},
allTasks:[]
}

Hope that helps you.

3 Likes

thank you so much, it took me long time to understand this.
why codecademy provided class components while the world is moving with hooks

I’m working on the Web Development path but didn’t quite understand React, so I figured I’d do the Learn React course for more in-depth understanding.

It’s very educational so far. But I don’t think I’m quite understanding hooks yet. I had little idea what to do for the last assignment of the lesson, to convert AppClass. Is there a good place on the web where I can practice/play around with this concept, to get more of a feel for it?
Or is this something that will develop as I continue with the Learn React course?