I think I have found some unnecessary code on one of the react challenges ...?

I think I have found some unnecessary code on one of the react lessons (please correct me if I’m wrong). On the screenshot below you can see my edited code left and on the right the code from the start of the lesson. I was trying to workout why we needed to deconstruct prevState.newTask and have it as part of the newTask we are creating. I decided to edit the code to how I thought it should be and it seemed to work exactly the same. Can someone either confirm that this code isn’t needed or tell me why it is?

Another question is why is there square brackets around the ‘name’ key?

It is on the final lesson (lesson 9) of ‘The state hook’ within the react course.

Screenshot 2021-05-24 at 15.41.00

Hi @arc9323577458

Could you please provide a link to the lesson you’re referring to?

From what I see here, your code on the left and the code on the right do different things:
The function ‘handleChange’ receives the current state and copies the properties which aren’t ‘newTask’ to the new state. That is done in both windows.

But apparently, newTask has also previous values from the previous state that the code on the right concatenates with the newly received argument to a new object. Your code just returns one task as newTask.

You receive the key “name” as an argument from the event target that was passed in. In order for the key to recognize that it receives its name rather than simply being called ‘name’, you use bracket notation.

Hi @mirja_t, the lesson is this one: https://www.codecademy.com/paths/advanced-react-redux-sp/tracks/advanced-react-redux-sp-react/modules/react-hooks-u/lessons/the-state-hook/exercises/lesson-review .

I can see that we are deconstructing other new task values but I fail to understand why. In this case we just want a new task to be added to the allTasks list and from my understanding the prevState.newTask will always be {}. Please have a look at the lesson and see if that makes sense.

Ahhh yes that’s right it’s the equivalent to using the brackets instead of dot notation, thanks.

@mirja_t, I think a better way to phrase my question is, why are we taking the previous state of the newTask. Does that not mean the object when we finally submit will have each iteration of the newTask as we typed rather than just the final value which is the only one we care about in this instance?

Ok, I had a look at the exercise.
There are two input fields for creating a task: title and description.
Have a look at the file ‘NewTask.js’ in the folder ‘Presentational’:

        placeholder="New task"
        value={newTask.title || ""}
            value={newTask.description || ""}

When you type in the <input name='title' ... > ‘title’ is passed as event.target[name]. When you type in the <textarea name='description'...> ‘description’ is passed as ‘name’. And then the previously typed title is copied from the previous state.

If you put a console into the function ‘handleChange’, you see that the newTask object has 3 keys:

  • title
  • id
  • description