1
00:00:00,740 --> 00:00:05,550
We are now going to make use of the hook system in react rather than worrying about collapsing or expanding

2
00:00:05,550 --> 00:00:06,420
any of these panels.

3
00:00:06,720 --> 00:00:11,730
Right now, we're just going to try to keep track of what index the user has clicked on and then print

4
00:00:11,730 --> 00:00:13,860
up that index at the very bottom of the screen.

5
00:00:14,550 --> 00:00:18,960
So in other words, if I click on the first element right here, that's at index zero, I should print

6
00:00:18,960 --> 00:00:20,070
zero at the very bottom.

7
00:00:20,400 --> 00:00:22,140
If I click on the second one, I should see one.

8
00:00:22,280 --> 00:00:24,060
And if I click on that one, I should see two.

9
00:00:24,960 --> 00:00:29,010
Now, before I show you the hook system, I want to show you how we would approach this using simple

10
00:00:29,070 --> 00:00:30,390
class based components.

11
00:00:31,150 --> 00:00:32,100
Here's the general idea.

12
00:00:33,080 --> 00:00:37,130
I took the liberty of writing out a little bit of code of an alternate implementation of the accordion

13
00:00:37,130 --> 00:00:38,750
component using a class.

14
00:00:39,470 --> 00:00:44,870
So if we wanted to show the index of the currently selected panel at the very bottom, there are three

15
00:00:44,900 --> 00:00:46,360
key things we would do inside of here.

16
00:00:46,880 --> 00:00:51,890
First, we would initialize our state object at the top and maybe we would have a property inside there

17
00:00:51,890 --> 00:00:53,690
called something like active index.

18
00:00:54,530 --> 00:00:59,330
Second, we would have a helper method that was called whenever a user clicked on a title.

19
00:01:00,570 --> 00:01:03,870
And inside there, we would update our state by calling this dot said state.

20
00:01:04,810 --> 00:01:09,270
And then finally, we would reference our piece of state down here inside the render method with this

21
00:01:09,270 --> 00:01:10,930
dot state, dot active index.

22
00:01:11,840 --> 00:01:13,080
Then total beat.

23
00:01:13,140 --> 00:01:14,220
Three things to remember.

24
00:01:14,520 --> 00:01:16,010
We initialize the value of our state.

25
00:01:16,500 --> 00:01:19,020
We only change that value through set state.

26
00:01:19,570 --> 00:01:23,580
And then finally, we can reference that value at any point time inside of our entire class.

27
00:01:23,790 --> 00:01:26,190
With this DOT state, that active index.

28
00:01:27,030 --> 00:01:30,970
So with that reminder in our head, let's now go over back to our code editor.

29
00:01:31,470 --> 00:01:35,910
We're going to write out some code to use the hook system to do something very similar to what we see

30
00:01:35,910 --> 00:01:36,630
inside of here.

31
00:01:36,960 --> 00:01:40,800
We're going to keep track of the currently selected index and then printed out at the bottom of the

32
00:01:40,800 --> 00:01:41,190
screen.

33
00:01:42,620 --> 00:01:42,900
OK.

34
00:01:42,980 --> 00:01:45,950
So they're gonna write out this code very quickly and then discuss what it is doing.

35
00:01:46,640 --> 00:01:53,150
First off, at the very top, I'm going to get the U.S. state function from the REACT Library.

36
00:01:53,830 --> 00:01:55,700
So we spoke about this function very briefly.

37
00:01:56,030 --> 00:01:57,050
This is a hook.

38
00:01:57,290 --> 00:02:00,050
It gives us access to state inside of a function component.

39
00:02:01,040 --> 00:02:02,930
Next up at the top of my component.

40
00:02:04,100 --> 00:02:08,060
I'm going to write out a line of code that is going to initialize a new piece of state.

41
00:02:08,960 --> 00:02:11,840
I'm going to write out const a set of square brackets.

42
00:02:12,380 --> 00:02:16,910
Inside there, I'll put an active index and set active index.

43
00:02:19,260 --> 00:02:22,710
Then on the other side of those square brackets, I'll put in an equal sign.

44
00:02:23,610 --> 00:02:26,490
All right, out you state and I'll put in No.

45
00:02:28,330 --> 00:02:30,190
Next up, inside of Untitled Click.

46
00:02:30,400 --> 00:02:33,400
We're going to make sure that we update our value of our piece of state.

47
00:02:33,650 --> 00:02:39,490
Anytime a user clicks on the title, I'm going to delete the console log and replace it with set active

48
00:02:39,580 --> 00:02:42,070
index and I'll pass in the index.

49
00:02:43,450 --> 00:02:45,080
And then finally, one last change.

50
00:02:46,390 --> 00:02:48,730
Down at the very bottom are going to expand this d'Hiv.

51
00:02:50,860 --> 00:02:52,600
I'm gonna put an H1 inside their.

52
00:02:54,220 --> 00:02:58,410
And inside of it, I'm going to print out the value of active index.

53
00:02:59,700 --> 00:02:59,940
OK.

54
00:03:00,090 --> 00:03:00,840
Let's say this.

55
00:03:00,930 --> 00:03:04,210
Now we are going to discuss all the code we just wrote in great detail.

56
00:03:04,500 --> 00:03:07,040
But right now, let's just go test this out inside the browser.

57
00:03:08,100 --> 00:03:09,150
So I can now flip back over.

58
00:03:09,690 --> 00:03:13,610
I'll then click on the first panel right here and I see zero up here.

59
00:03:14,370 --> 00:03:16,950
I can click on the second and see one and two.

60
00:03:17,510 --> 00:03:20,940
And as I click on each one, they update to the appropriate index.

61
00:03:22,090 --> 00:03:22,390
All right.

62
00:03:22,570 --> 00:03:27,010
Well, it definitely looks like something is working as expected, but this is a lot of kind of mysterious

63
00:03:27,010 --> 00:03:27,340
code.

64
00:03:27,880 --> 00:03:32,830
So let's pause right here and then discuss exactly what we are doing with every bit of code that we

65
00:03:32,830 --> 00:03:33,520
just added.