Let's figure out what code we just wrote into the accordion component.
We're going to first start with this line of code right here.
You'll notice what he called a function called the you state that is coming from the react library.
You state is one of the react primitive hooks that is available to us.
The goal of you state is specifically to give us access to the state system inside of a functional component.
The next thing I want to mention is that whenever we call you states, we're making use of this very
strange syntax off to the left hand side.
Let's do a quick aside and understand what the syntax is all about, because it really looks like we
are making an array in a location where we normally definitely do not make an array.
All right.
No quick code snippet.
I'm gonna write out a quick example inside my console, but since I syntax that we saw is referred to
as a Ray D structuring the idea behind a radio structuring is identical to Object D structuring.
It is just a shortcut to get access to some elements inside of an array.
For example, I could have an array called colors with a value of red and green.
Naturally, I can now access these two elements by writing out colors at zero or colors at one.
However, if I did so and I wanted to assign these to two separate variables, I would end up with three
lines of code.
In total, I would have to write out concert colors and then I'd have to write out something like Red
color is colors at zero.
And green color.
Is colors at one in total?
One line of code just to get the array.
Another line of code to get a reference to the first element and another to get reference to the second
element that is really tedious, to write out these colors at zero in colors that one minds.
So instead, we would make use of a radio structuring.
We could write out something like Arnst.
First element and second element.
Equals colors.
Like so.
The square brackets that you see on the left hand side are not creating an array, no array whatsoever
is being created.
Instead, this is some syntax to tell JavaScript that we want to get access to the first element inside
of the colors array and assign it to a new variable called first element.
We then want to get access to the second element inside that array and assign it to a variable called
second element.
So if I now run that, I can have a variable called first element and second element.
So it's just a way that is a shortcut to get references to elements inside of an array.
So we can apply that back to this line of code right here, whenever we call you states.
We get back an array with exactly two elements inside of it.
Rather than writing out something like, say.
Things and then active index is things at zero.
And set active index is things at one which is really tedious.
We instead use that a radio structuring.
That is all that's going on with those square brackets.
So how about the individual names, like what are these actual variables?
Well, this first argument coming back from calling you state is the piece of state that we are trying
to keep track of.
So this is a reference to some variable or some assuming some value that is going to change over time.
The second element inside the array set active index is a function that we call to update our piece
of state.
Anytime that we call this center function right here to update our piece of state, just like inside
of a Class-Based component, it will cause our entire component to automatically render.
Finally, whenever we call you states, it takes in one argument and that is going to be the default
value for our piece of state.
So in total, that entire line essentially can be summed up inside this diagram.
So we call you states.
We put in our initial value.
That initial value is immediately assigned to active index over here.
And then we can update that value using set active index.
The names of set are some of the names of active index and set active index are not special.
We can change these names to be anything we want.
So if we have some other piece of state inside of a function component, we want to keep track of.
To represent, say, a name of a person.
We would update this to something like.
Name.
Set.
Name.
And maybe as an initial value, we would provide an empty string.
If you're trying to keep track of some counter, we might put in counter, set, counter and then maybe
the default for our counter is zero.
And finally, if we want to implement some kind of color picker where user picks the color of, say,
red or green or something like that, we might have color, set, color, and then maybe we would have
an initial value of, say, green.
And now anytime we want to update these selected color, we would call set color with a new color.
Now, the piece of state right here, the setter and the initial value have direct parallels to the
class component implementation of state.
Let me show you a diagram to explain.
OK, so as we just saw it and said a reminder diagram, a moment to go.
This one right here.
We mentioned that inside of a Class-Based component, we had to initialize evalu states.
We had to change the value of state at some point time and we had to reference a piece of state as well.
So inside this diagram, we've got how we would do that inside of a Class-Based component.
And then the equivalent in a function component world where we are making use of the you state hook.
So to initialize the piece of state inside of a component we write out, state equals an object.
Inside that object is our state name or the property name and then an initial value for it.
In a function component, we instead just call you states provide the initial value right there.
To reference our piece of state inside of a class component.
If this dot, state, dot, whatever our property is called, inside of a function component, it is
whatever we named our piece of state.
And again, the name of that piece of state.
So this variable name and this variable name are not special.
We can call them whatever we want.
And then finally, to update state inside of a class component we call set state and provide an object.
But inside of a function component, we call that center function and just provide the new value.
And we saw that right here inside of set titled Click.
We call that center function and provided a new value.
Now, the one key thing that is kind of confusing, in my personal opinion, between class components
and function components when it comes to the state system, is that with a class component, we can
very easily define and change multiple pieces of state at the same time.
For example, let's imagine that we wanted to have a second piece of state inside of our accordion component,
maybe something to keep track of some search term or something like that.
If we were creating a class based component for that, we would write out some code like you see right
here.
It's a state initial value it for it is active index at zero and term is empty string.
If we then wanted to update those two properties at the exact same time, we could call this DOT said
states and provide an object with a new value for active index and a new value for term inside of a
Class-Based component.
It is really easy and straightforward to initialize and change multiple state values at the same time.
Inside of a function component, however, it's a little bit different.
If we ever want to have multiple pieces of states, we call you state multiple times.
So we wanted to have two pieces of state.
We'd call it twice, once up here to define and initialize the active index piece of states.
And then a second time right here to define and initialize the term piece of states.
If we then wanted to update those state values, we would first call one center, so said active index
and the other center that term.
And actually that should not be set term, tend to be something like search or what have you.
OK.
So in this video provided a lot of information about the use state book, look, if this is all confusing
right now, as usual, do not sweat.
It is we're going to get a tremendous amount of practice with the you state hook.
As I mentioned, this entire accordion application is really just a very small part of a larger app
that we're going to be building.
And so as we continue on with this app right now, we're going to be making use of you state several
more times to get a better idea of how it works.
Let's take a pause right here and come back and understand a little bit more around you state in just
a moment.