1
00:00:01,820 --> 00:00:04,040
Now you've got the basics of use state down.

2
00:00:04,130 --> 00:00:06,710
Let's go ahead and finish up this accordion example.

3
00:00:07,400 --> 00:00:11,120
We've got this active index variable that is going to be changing over time.

4
00:00:11,430 --> 00:00:16,700
Whenever a user clicks on a title, active index will be updated and we will re render this entire component.

5
00:00:17,540 --> 00:00:20,690
So how are you going to actually expand one these items or shrink it?

6
00:00:21,260 --> 00:00:26,000
Well, it all comes down to the existence of the active class name on this div right here inside of

7
00:00:26,000 --> 00:00:26,450
our list.

8
00:00:26,900 --> 00:00:30,620
And the active class name right here, the active class names.

9
00:00:30,710 --> 00:00:35,540
So I can delete those really quickly, control whether or not an individual item will be expanded.

10
00:00:36,470 --> 00:00:41,030
So we need to make sure that whenever we are iterating over our list of items right here, we need to

11
00:00:41,030 --> 00:00:47,180
take a look at the index that we are currently iterating over and then compare it to the active index

12
00:00:47,180 --> 00:00:47,900
piece of state.

13
00:00:48,740 --> 00:00:54,230
If they are equal to each other, then we will want to add the class name of active to this day right

14
00:00:54,230 --> 00:00:55,970
here and that div right there.

15
00:00:56,630 --> 00:00:59,510
So that's our general goal to implement this.

16
00:00:59,930 --> 00:01:01,040
How about we put together.

17
00:01:02,160 --> 00:01:07,720
A little expression right here to decide whether or not we should apply the active class name, but

18
00:01:07,760 --> 00:01:09,870
declare a new variable called active.

19
00:01:10,380 --> 00:01:14,010
And I will check to see if the index of the item that we are currently iterating over.

20
00:01:15,330 --> 00:01:18,630
Is equal to the active index piece of state.

21
00:01:21,220 --> 00:01:28,930
If it is, then I'm going to assign a value of active to this variable, otherwise I will assign empty

22
00:01:28,930 --> 00:01:29,650
string to it.

23
00:01:31,540 --> 00:01:36,940
Now we can simply take this active variable and interpolate it or essentially join it together into

24
00:01:36,940 --> 00:01:37,750
this class name.

25
00:01:38,830 --> 00:01:39,250
Do so.

26
00:01:39,250 --> 00:01:43,690
We're going to wrap this with some curly braces because we need to write out a little JavaScript expression

27
00:01:43,690 --> 00:01:44,260
inside of your.

28
00:01:45,120 --> 00:01:47,200
Now, we could simply join on.

29
00:01:48,730 --> 00:01:54,640
With plus active and put a space in there, or alternatively, we could use string templating, which

30
00:01:54,640 --> 00:01:58,810
is probably a little bit preferable, though, for that, let's delete everything inside there and replace

31
00:01:58,810 --> 00:01:59,920
it with back ticks.

32
00:02:00,520 --> 00:02:01,240
We can put in.

33
00:02:02,610 --> 00:02:06,210
Title, then dollar sign, curly braces active.

34
00:02:07,230 --> 00:02:10,560
And then we'll repeat the same thing down here for content as well.

35
00:02:11,160 --> 00:02:14,060
Curly braces back, ticks content.

36
00:02:14,280 --> 00:02:14,810
Dollar sign.

37
00:02:14,820 --> 00:02:16,410
Curly braces active.

38
00:02:19,180 --> 00:02:23,890
Finally, I think we don't really need the H one down inside the render statement anymore or this J.S.

39
00:02:23,890 --> 00:02:25,690
X block cell delete that each one.

40
00:02:27,930 --> 00:02:28,140
All right.

41
00:02:28,200 --> 00:02:30,420
Let's save this and do a quick test.

42
00:02:31,420 --> 00:02:35,310
So now, by default, all these options are kind of great out until a mouse over them.

43
00:02:36,000 --> 00:02:37,800
If I then click on one, it expands it.

44
00:02:38,470 --> 00:02:40,410
I can click on another and another.

45
00:02:41,130 --> 00:02:43,200
Only one item can be expanded at a time.

46
00:02:43,320 --> 00:02:46,800
So as soon as I click on another one, the previously expanded one collapses.

47
00:02:47,760 --> 00:02:48,060
All right.

48
00:02:48,090 --> 00:02:49,890
Well, simple little component.

49
00:02:49,950 --> 00:02:51,420
That is pretty much it.

50
00:02:51,450 --> 00:02:52,410
That is our accordion.

51
00:02:53,740 --> 00:02:58,730
So we've seen a very basic example of you states now, as I mentioned, the application we're working

52
00:02:58,730 --> 00:03:01,160
on here is a little bit larger than the accordion.

53
00:03:01,660 --> 00:03:02,600
So let's take a pause here.

54
00:03:02,690 --> 00:03:03,800
We'll come back to the next video.

55
00:03:04,070 --> 00:03:07,580
We're gonna start to take a look at another component that we're going to build into this application

56
00:03:07,880 --> 00:03:10,940
and understand how we're going to use some additional hooks to put it together.