Trouble wrapping my head around React Hooks

I’m working through the React Hooks section of the Learn React course and I’ve hit a point where nothing is making sense to me. I breezed through the Class Components section, had no trouble understanding any of it and was feeling confident and excited. About half way through Function Components it feels like the complexity jumped x 100.

I’m hoping someone can explain the following function to me in plain English. Specifically the handleChange event handler. The parameter with curly brackets, the const object that = the parameter object, the …prev, and the array [name] key are all throwing me off.

Here’s the image I’m referring to in the question:

Here’s the link: https://www.codecademy.com/courses/react-101/lessons/the-state-hook/exercises/objects-in-state

Hi,

I will try to help with what I can here.

  • First:

So that would be this:

const { name, value } = target;

That’s called destructuring assignment, a fancy name to say that you, at the same time, extract a value and assign it to a variable/const. :slight_smile:

Please do take a minute to read (and practice a bit with) this and particularly this part.

  • Next:

I still haven’t reached to hooks, but I assume they may be similar to setState (which I have already learned). Please anyone correct me if this is wrong. I am trying to help but I am still a learner here. :slight_smile:
If this is a similar case, then, I can comment that there are two possible ways to use the setState functions to update the state without mutating it. The most popular way of passing an object would be:

setState({ // the updates key(s) and value(s) go(es) here })

Then, there is still another way, which is passing a function instead of an object as parameter, and using the previous state as an arg for that function:

setState(prevStateHere => {
    ...prev, // -> this is the previous state spreaded, see below
    // the updates key(s) and value(s) go(es) here (this could be helpful, among other cases,
    // when you need to update state relative to any previous state value.)
}

See a better explanation about this here.

About the specific ...prev part. That’s called spread syntax, and it does exactly what the name suggests: takes an object, array, etc. and spreads it where you use the operator.
You can find a really nice explanation with examples and all here.

  • Next:

Oh, that’s no big deal. Simple as this: if you want to pass a string as an object key or value, then you just type it and then go like:

const myClothes = {
    winter: "coat"
}

// Now I'll access the key, like this:
console.log(myClothes.winter);

But how about if instead, I don’t know the key, I just know it’s stored in a variable?
That’s when bracket notation (please read this, it will help and it has better examples) comes to the rescue.

Let’s say that I don’t know what’s the season, because the user will enter that info in my app/website:

const myClothes = {
    summer: "t-shirt",
    winter: "coat",
    ...
}

// And now the user entered "summer". How would I make sure that
// the user gets a suggestion for clothing? How can I foresee it? 

// With a variable that is assigned the value entered:
const season = 'summer';
console.log(myClothes[season]); // prints "t-shirt"
// However, if I would say:
console.log(myClothes.season)
// there is no "season" key in the myClothes object, so it will complain with an error. :)

  • I almost forgot ‘The parameter with curly brackets’. That I think is also object destructuring, right? Like I said above, you passed an object assigned as const target. Hope that makes sense by the time you reach here in your reading.

After reading this comment and those links, tell me if something is still not clear and I’ll try to help.

Keep up. You got this! It’s way more about hard-headed persistence than about understanding everything at first. :slight_smile:

3 Likes

I have now today stumbled upon this one here in CodeCademy, too. And it’s pretty thorough and clear. Hopefully that will help you, too.

Wow. Thank you so much for the thorough explanation. I think I’ve finally got it. I really appreciate the time and thought put into your response! Best wishes!

1 Like