The next thing I want to focus on around this, you state hook is the set active index function.
Anytime we call you state, we get back that array.
And the second argument inside of it is always going to be our center.
We saw an example of how to call it inside this on Title Click.
So we simply called the center and provide the new value.
Now, I want to really think about what happens when we call this center right here.
So we're going to imagine for a second that our user clicks on the second index.
And so we would have an index value right here of two.
We then call the set active index function and we provide a value of two.
As soon as we call any set or function coming from a you state hook, our entire component is going
to re render.
We essentially go back up to the very top and execute everything inside of our function.
Once again.
Now, the thing that you need to keep in mind here, whenever you are thinking about your state, is
that when you re render your component the default value to the you state function.
That's the null value over here is then going to fall away.
It will not be used anymore.
This is only an initialization value.
And as soon as we call our setter, even one time, we will not be using that default value anymore.
So the second time we render this accordion component, the value of active index will be equal to whatever
we provided to our setter function, which in this case is to.
We would then execute the rest of our function with an active index equal to two.
Gets there just a little thing.
I want to focus on.
Let's take another pause and continue focusing on you state in just a moment.