1
00:00:01,210 --> 00:00:06,040
The next thing I want to focus on around this, you state hook is the set active index function.

2
00:00:06,650 --> 00:00:08,920
Anytime we call you state, we get back that array.

3
00:00:09,160 --> 00:00:12,310
And the second argument inside of it is always going to be our center.

4
00:00:13,000 --> 00:00:15,760
We saw an example of how to call it inside this on Title Click.

5
00:00:16,030 --> 00:00:18,760
So we simply called the center and provide the new value.

6
00:00:19,500 --> 00:00:23,260
Now, I want to really think about what happens when we call this center right here.

7
00:00:24,480 --> 00:00:28,440
So we're going to imagine for a second that our user clicks on the second index.

8
00:00:28,710 --> 00:00:32,040
And so we would have an index value right here of two.

9
00:00:33,070 --> 00:00:37,430
We then call the set active index function and we provide a value of two.

10
00:00:38,260 --> 00:00:43,810
As soon as we call any set or function coming from a you state hook, our entire component is going

11
00:00:43,810 --> 00:00:44,710
to re render.

12
00:00:45,340 --> 00:00:49,450
We essentially go back up to the very top and execute everything inside of our function.

13
00:00:49,660 --> 00:00:50,230
Once again.

14
00:00:51,760 --> 00:00:55,330
Now, the thing that you need to keep in mind here, whenever you are thinking about your state, is

15
00:00:55,330 --> 00:01:00,430
that when you re render your component the default value to the you state function.

16
00:01:00,790 --> 00:01:04,150
That's the null value over here is then going to fall away.

17
00:01:04,240 --> 00:01:05,520
It will not be used anymore.

18
00:01:06,160 --> 00:01:08,320
This is only an initialization value.

19
00:01:08,440 --> 00:01:13,990
And as soon as we call our setter, even one time, we will not be using that default value anymore.

20
00:01:15,090 --> 00:01:21,200
So the second time we render this accordion component, the value of active index will be equal to whatever

21
00:01:21,200 --> 00:01:24,470
we provided to our setter function, which in this case is to.

22
00:01:25,470 --> 00:01:29,700
We would then execute the rest of our function with an active index equal to two.

23
00:01:30,920 --> 00:01:32,080
Gets there just a little thing.

24
00:01:32,110 --> 00:01:32,960
I want to focus on.

25
00:01:33,170 --> 00:01:36,620
Let's take another pause and continue focusing on you state in just a moment.