React State

I am back and of course this time it has to do with state! So I know state is not immutable, it can be changed but you only want to change it using setState. If other components need state it also needs to be passed from a parent to child as props. I was going through my udemy lessons, and he did this example of a todo list where you can add new todos. I am confused on some of the code... Here is his full code

My questions....

First there is this code at the very top. So I know this a destructed function. im assuming hes using this to make it more organized? Because thats being used to map the array.

Then this. So todos is a empty array as state, and on the handleSubmit todos is still an empty array with this.state.todos. and set state is updating the todos ?

One more thing, and I apologize that this has alot of questions, but I need to understand. This line of code. Not sure. I know below this in the full code the todos are getting rendered making li's of whats in the array, but im not sure what this does

Cody Biggs wrote:So I know this a destructed function. im assuming hes using this to make it more organized?

I don't know what you mean by "destructed function". That's not a term in general use.

What it is, is an anonymous function assigned to a variable. In general use, it could be called through that variable or passed as an argument. Functions are first class objects in JS.

In React however, you can create what's called a functional component out of just a function. This is a nice shortcut, as opposed to creating a class, for components that need no state or lifecycle methods.

Note how the variable is used as a component at line 25.

Then this. So todos is a empty array as state, and on the handleSubmit todos is still an empty array with this.state.todos. and set state is updating the todos ?

He's using a lot of ES6 notation that isn't specific to just React.

In the above, a new array is being created and assigned to variable todo. The first element of the array is the expanded state.todos. The ... notation expands the array in place and all its elements become elements of the new array. Then the new todo is also added to the array. So this is essentially an append operation. You could do a prepend by reversing the order.

Here, the new todos array is set into state, and the newTodo state variable is set to the empty string.

The notation might look strange because the first property is just todo. In ES6, within an object literal (sometimes called a hash) if the property name and the reference name of the value are the same, you don't need to write it more than once.

So { todos } is just shorthand for { todos: todos }

One more thing, and I apologize that this has alot of questions, but I need to understand. This line of code. Not sure. I know below this in the full code the todos are getting rendered making li's of whats in the array, but im not sure what this does

More ES6 syntactic sugar. The {} in a declaration is called deconstruction. It says, extract the named property and create a const of the same name. So it's the same as:
You'll often see this used to make code easier to read. Instead of using this.state.newTodo throughout the rest of the code, you can just use newTodo.

You'll often see it in a render function to extract props into consts for use in the rest of the function:

Here's another example of a functional component from my BlackBox game:
Because the component needs no state, and doesn't need to have lifecycle methods, rather than creating a class, I just use a function.

Here's another example that uses props:
Note how line 6 lets me use simple names in the function rather than having to precede with props. all the time. This helps keep code more readable.

I think it also helps to make the props self-documenting (although using PropTypes helps even more).

Sorry, I meant a stateless component that uses deconstruction, not destructed..

So im still confused on the code below. There is a state array made called todos that is empty, but then he makes a variable todos array to hold the state todos array. Using the the spread operator the array values will look like "wash dishes", "clean room" instead of ["wash dishes", "clean room"]. I guess I dont exactly see where todos gets the values from? What gives todos a value to expand? because in the input value is set to newTodo which just clears the input after the todo is added?

and then still this. I see the deconstruction. So this is just so that he can use {newTodo}? This is not somehow changing any values? so this should still be an empty ' '?

So im still confused on the code below. There is a state array made called todos that is empty, but then he makes a variable todos array to hold the state todos array. Using the the spread operator the array values will look like "wash dishes", "clean room" instead of ["wash dishes", "clean room"]. I guess I dont exactly see where todos gets the values from? What gives todos a value to expand? because in the input value is set to newTodo which just clears the input after the todo is added?

The first pass through, this.state.todos will indeed be empty, and the new todo will get appended to it. So now the variable, and the state list, has a non-zero-length. Second time through it will get another new todo added to it, and so on.

and then still this. I see the deconstruction. So this is just so that he can use {newTodo}? This is not somehow changing any values? so this should still be an empty ' '?

Correct the only thing this does is to create a const named newTodo that has the value of this.state.newTodo, so that later in the function it can be referenced without the prefix.

This may seem over-kill for a single value, but trust me, when you have a number of state variable and props, eliminating the prefixes make the code markedly easier to read. So I am in there habit of doing the above even for single values. It is not a bad habit to get into.

Depending on when this is called in the grand scheme of things, it may be empty because it hasn't been assigned yet, or wherever a new todo is added, it is specifically emptied out by the code on line 4 above.

This is just like props where its going to take me 4 days to get this lol. I can see and understand

However I still dont see where this.state.todos is getting its value. There is text inside that box, and once submit is pressed it is telling setState to put that todo in the array? Or Something is putting it in the todos array, and setState then adds that to be rendered. Like in javascript there would be like a .push inside a method saying that once its clicked add the text to the array. But react doesnt have a push method. So if this makes sense...what is reacts push method here? How does react know to put the new todo in the array once the button is pushed?

Think I got it. I did know what setState was really doing. But after a few hours of reading, and looking at examples it makes more sense. Especially the target value. I didn’t know what was going on with that, but I figured it out. Appreciate you hanging in there with me bear