1
00:00:01,630 --> 00:00:03,800
Our list of items is looking pretty well styled.

2
00:00:04,160 --> 00:00:08,480
The next thing we need to do is figure out how to detect whenever user clicks on one of these titles.

3
00:00:08,970 --> 00:00:11,900
As you guessed, that means that we're just going to wire up an event handler.

4
00:00:12,350 --> 00:00:18,380
We need to add in any on click event handler to detect anytime a user clicks on one of these titles.

5
00:00:19,460 --> 00:00:21,770
To do so, we could go back over to our Ed.

6
00:00:23,140 --> 00:00:26,710
I'm going to find the d'Hiv with the class of title active right here.

7
00:00:27,910 --> 00:00:29,710
I'm going to give myself a little bit of space.

8
00:00:31,870 --> 00:00:37,300
And then on, they're going to add in an unclick prop, so anytime someone clicks on this thing, I'm

9
00:00:37,310 --> 00:00:43,180
going to run a little arrow function and inside there I'll do a console log of title clicked.

10
00:00:43,780 --> 00:00:47,590
And then I would love to display the index of the item that was clicked on.

11
00:00:47,980 --> 00:00:52,060
Remember, we're trying to keep track of which index should be expanded at any given time.

12
00:00:52,510 --> 00:00:57,760
This is index zero because it represents the first element inside of our array, index one, an index

13
00:00:58,320 --> 00:01:02,230
to make sure that we also console log the index of the title that was just clicked.

14
00:01:02,560 --> 00:01:04,510
We can receive the index argument.

15
00:01:04,840 --> 00:01:06,970
That is the second argument to the map function.

16
00:01:08,970 --> 00:01:12,700
We can take that index variable and add it into the very end of that console log.

17
00:01:16,680 --> 00:01:17,530
I'm going to say that.

18
00:01:18,040 --> 00:01:18,970
Let's do a quick test.

19
00:01:19,840 --> 00:01:23,350
I'll open up my console and then I will click on some these titles.

20
00:01:24,220 --> 00:01:27,010
And as soon as I do so, I see title click zero one into.

21
00:01:27,820 --> 00:01:28,030
All right.

22
00:01:28,060 --> 00:01:29,020
Well, simple enough.

23
00:01:29,170 --> 00:01:30,430
Nothing too crazy so far.

24
00:01:31,300 --> 00:01:33,160
Now, here's one thing I won't mention really quickly.

25
00:01:33,760 --> 00:01:38,260
It's entirely possible that this unclick callback right here is going to eventually have a good amount

26
00:01:38,260 --> 00:01:39,190
of code inside of it.

27
00:01:39,760 --> 00:01:40,140
Who knows?

28
00:01:40,150 --> 00:01:44,380
Maybe we need to write in a lot of code to work with this Hooke's state system.

29
00:01:44,650 --> 00:01:49,870
I don't know yet, but it might be a little bit messy to add in all the code right here directly in

30
00:01:49,870 --> 00:01:50,230
line.

31
00:01:50,950 --> 00:01:55,540
So I think would be really nice if we could put together some helper function and then write out that

32
00:01:55,540 --> 00:01:57,970
helper function somewhere else inside this file.

33
00:01:58,750 --> 00:02:03,160
Now, if we had done this inside of a class based component, that would be really easy to do.

34
00:02:03,610 --> 00:02:07,150
Let me show you a quick example of what we might do if we had a class based component.

35
00:02:07,900 --> 00:02:09,940
We could do something like class accordion.

36
00:02:12,160 --> 00:02:13,110
Extends components.

37
00:02:13,720 --> 00:02:18,130
And then maybe inside this thing would have a render method that produced our ASX.

38
00:02:18,790 --> 00:02:22,700
And then if we wanted to add in that helper method, we could add in something like on Idol.

39
00:02:22,990 --> 00:02:23,470
Click.

40
00:02:24,970 --> 00:02:29,340
And then inside of here, we could do a console log of title was linked.

41
00:02:30,450 --> 00:02:34,840
So as we discussed many times, one of the nice things about a Class-Based component is it's really

42
00:02:34,840 --> 00:02:36,220
easy to organize your code.

43
00:02:36,610 --> 00:02:39,820
If you ever need to add in some kind of helper method, well, you just added in.

44
00:02:40,190 --> 00:02:42,490
It's really easy to give it a very appropriate name.

45
00:02:42,520 --> 00:02:47,950
That makes it clear to other engineers what that method is doing for you inside of a function component.

46
00:02:48,010 --> 00:02:50,080
That is a little bit more challenging.

47
00:02:50,620 --> 00:02:55,660
Let me show you how we would approach adding in some kind of helper function or helper method to a function

48
00:02:55,680 --> 00:02:56,140
component.

49
00:02:57,140 --> 00:02:58,480
I'm gonna delete that little example.

50
00:02:59,350 --> 00:03:05,590
Then at the very top of accordion, I'm going to define a new helper function and assign it to a variable

51
00:03:05,590 --> 00:03:08,170
called on Idol Click.

52
00:03:10,910 --> 00:03:15,290
I'm going to expect that this is going to receive the index of the item that was just clicked on and

53
00:03:15,290 --> 00:03:21,170
then inside there will do a console log as well of title clicked and then print out the index.

54
00:03:22,070 --> 00:03:24,380
So I now want to call this function right here.

55
00:03:25,040 --> 00:03:27,470
Anytime a user clicks on that div.

56
00:03:28,890 --> 00:03:33,060
So now I'm still going to leave in this aero function right here and I'm going to replace that console

57
00:03:33,060 --> 00:03:33,480
log.

58
00:03:35,340 --> 00:03:42,780
And call on title click and pass through the index, though, on Idol, click and pass through the index

59
00:03:42,780 --> 00:03:43,290
like so.

60
00:03:44,660 --> 00:03:46,070
Why do we still have the aero function?

61
00:03:46,580 --> 00:03:49,040
Well, remember, if we just write out something like this.

62
00:03:50,320 --> 00:03:54,520
Then on Title Click is going to be invoked the instant that our list of items is rendered.

63
00:03:55,060 --> 00:03:58,390
As a matter of fact, we can even verify that if we save the file as it is right now.

64
00:03:58,870 --> 00:04:03,570
Flip back over and the instant we refresh the page, we see title click zero one into.

65
00:04:04,420 --> 00:04:08,380
We do not want to run that callback function the instant our company is rendered.

66
00:04:08,650 --> 00:04:11,260
Instead, we want to call it at some point in time the future.

67
00:04:11,650 --> 00:04:13,750
And to do that, we have to wrap it with an arrow function.

68
00:04:14,560 --> 00:04:18,370
Now, whenever that era function is executed, we run on title click.

69
00:04:19,230 --> 00:04:23,570
And the reason I'm making such a big deal about this entire helper method right here is that it's gonna

70
00:04:23,590 --> 00:04:27,190
be a little bit nasty and your components are gonna end up being a little cluttered.

71
00:04:27,460 --> 00:04:32,440
When you write out all these helper functions inside the body of a function component, you don't get

72
00:04:32,440 --> 00:04:36,460
that kind of nice separation of code that we used to have back inside of a class based component.

73
00:04:37,180 --> 00:04:42,040
So this is just something I want you to be aware of a little bit harder to write, a very nicely organized

74
00:04:42,040 --> 00:04:42,520
component.

75
00:04:42,790 --> 00:04:45,640
When you are using a function component, that's just the reality.

76
00:04:47,130 --> 00:04:47,310
All right.

77
00:04:47,460 --> 00:04:49,410
Let's save this with the arrow function in there.

78
00:04:51,500 --> 00:04:52,760
And then do another quick test.

79
00:04:53,960 --> 00:04:57,990
Well, I'll click on these titles, and yet I still see those console logs.

80
00:04:59,410 --> 00:04:59,570
OK.

81
00:04:59,720 --> 00:05:00,500
So this looks pretty good.

82
00:05:01,250 --> 00:05:06,620
Now, as I mentioned, we need to make use of the Hooke's state system to somehow keep track of which

83
00:05:06,620 --> 00:05:09,020
of these elements should be expanded and collapsed.

84
00:05:09,710 --> 00:05:15,080
Let's take a pause right here and then start to understand the state system with hooks in the next video.