1
00:00:00,770 --> 00:00:03,290
Let's go over a quick solution to this exercise.

2
00:00:03,880 --> 00:00:08,360
So step number one, we need to call are you state function at the very top of our component.

3
00:00:08,950 --> 00:00:11,630
So right above this event handler I put together for you.

4
00:00:12,020 --> 00:00:13,640
I'm going to call you State.

5
00:00:14,060 --> 00:00:19,160
And remember, whenever we call you state, we get back to elements inside of an array going to d structure

6
00:00:19,190 --> 00:00:23,240
out those elements and assign them to count and set count.

7
00:00:25,070 --> 00:00:29,180
When I call you states, I will also make sure that I provide a reasonable default value.

8
00:00:29,440 --> 00:00:31,400
So in this case, I started off at zero.

9
00:00:33,000 --> 00:00:38,340
Next up, I'm going to make sure that inside of my J.S. X block right here, right inside, that each

10
00:00:38,340 --> 00:00:42,600
one I'm going to reference that count piece of state that I just created.

11
00:00:44,100 --> 00:00:48,390
The very first time I component is rendered and displayed on the screen, count is gonna have a value

12
00:00:48,450 --> 00:00:48,970
of zero.

13
00:00:49,080 --> 00:00:52,650
And that's why I see it current count zero appear on the right hand side.

14
00:00:54,510 --> 00:00:59,190
Now, whenever a user clicks on that button, the event handler on button click will be invoked.

15
00:00:59,770 --> 00:01:05,070
So inside of on button click I'm going to call Set Count because I want to update my piece of state

16
00:01:05,700 --> 00:01:06,530
local set count.

17
00:01:07,100 --> 00:01:08,730
I'll provide a new value to it.

18
00:01:09,300 --> 00:01:13,260
The new value I want to update my state to will be count plus one.

19
00:01:13,500 --> 00:01:13,950
Like so.

20
00:01:15,920 --> 00:01:20,480
As soon as that count is called, that will also cause my entire component to automatically re render.

21
00:01:20,870 --> 00:01:25,610
When it does so count will be equal to the new value that I just passed in to set count.

22
00:01:26,420 --> 00:01:28,220
Let's go ahead and try this out now.

23
00:01:28,730 --> 00:01:28,960
All right.

24
00:01:28,970 --> 00:01:29,480
Click me.

25
00:01:29,840 --> 00:01:30,080
I see.

26
00:01:30,080 --> 00:01:32,000
One, two, three, four, and so on.

27
00:01:32,950 --> 00:01:34,290
I will also check my solution.

28
00:01:35,860 --> 00:01:41,020
This might take an attempt or two, I've attempted to check the solution a couple of times now and every

29
00:01:41,020 --> 00:01:43,000
now and then it times out hopefully.

30
00:01:43,180 --> 00:01:43,370
OK.

31
00:01:43,420 --> 00:01:43,900
There we go.

32
00:01:44,210 --> 00:01:44,340
Yep.

33
00:01:44,410 --> 00:01:45,940
Looks like the solution is correct.

34
00:01:46,630 --> 00:01:48,160
Hopefully you got this exercise together.

35
00:01:48,580 --> 00:01:52,200
Let's pause here and then continue on our accordion application in just a moment.