1
00:00:00,140 --> 00:00:05,120
Okeydokey so we have a much better looking list items right now.

2
00:00:05,190 --> 00:00:11,700
The whole list the book lists with some nice photos with some nice titles as well as with an awesome

3
00:00:11,700 --> 00:00:12,680
author.

4
00:00:12,780 --> 00:00:17,440
Why don't we talk about the events in JavaScript now how we can handle them.

5
00:00:17,700 --> 00:00:22,680
Because at the moment the only thing we have been doing dynamically in fact is been rendering the list

6
00:00:23,070 --> 00:00:25,190
as well as working with the props.

7
00:00:25,200 --> 00:00:31,650
But obviously the whole point of javascript is that this allows the user to really really interact with

8
00:00:31,650 --> 00:00:32,010
the page.

9
00:00:32,490 --> 00:00:36,660
So let's just throw an ad for this will first going to create some dumb button.

10
00:00:37,110 --> 00:00:42,030
So I'm gonna say Here whatever within the dev there is gonna be a button.

11
00:00:42,030 --> 00:00:48,570
Now we can set maybe a type and for the type we're going to say had an ad count or I'm sorry not for

12
00:00:48,570 --> 00:00:53,310
the type we're going to add button but within the button let's just say has come and this is gonna make

13
00:00:53,310 --> 00:00:56,570
sense a little bit later on as we're going to be working on this that state.

14
00:00:56,590 --> 00:01:02,100
But for now legislators like this and that now we need to decide how we're gonna be interacting with

15
00:01:02,100 --> 00:01:06,540
this button because our state at the moment I can click all day long and nothing is going to happen.

16
00:01:07,110 --> 00:01:07,560
And you know what.

17
00:01:07,560 --> 00:01:12,570
Since we were all going to be using the console might as well open it right now and I'm gonna look for

18
00:01:12,570 --> 00:01:15,960
the console and you're obviously is gonna be my console.

19
00:01:16,020 --> 00:01:18,380
Knock it fine.

20
00:01:18,430 --> 00:01:19,990
Where are we going from now.

21
00:01:20,350 --> 00:01:26,830
Well I would like to set up here a method where the difference right now is gonna be that this is not

22
00:01:26,830 --> 00:01:30,740
going to be some kind of method that we had already from react.

23
00:01:30,910 --> 00:01:32,520
Like for example what we have.

24
00:01:32,620 --> 00:01:34,080
Well we had the render method right.

25
00:01:34,450 --> 00:01:36,940
And then also we have the constructor method.

26
00:01:37,000 --> 00:01:39,340
In this case we're going to create our own method.

27
00:01:39,400 --> 00:01:44,020
So I'm going to say let's say handle click and that's gonna be my name.

28
00:01:44,020 --> 00:01:46,320
And here I can just write and this would be the method.

29
00:01:46,360 --> 00:01:52,310
Again I do need to follow the syntax but this is the method that we are creating our.

30
00:01:52,540 --> 00:01:56,040
And here I'm going to say don't know console log I guess.

31
00:01:56,140 --> 00:02:01,000
So at the moment over a console log or in the moment we're going to click the button we're going to

32
00:02:01,000 --> 00:02:02,070
console log.

33
00:02:02,080 --> 00:02:11,050
I'm not gonna say you click me something like this again we say it now nothing is happening because

34
00:02:11,050 --> 00:02:13,660
we need to somehow connect them both.

35
00:02:13,660 --> 00:02:16,620
We have the handle of click and then we have our.

36
00:02:17,260 --> 00:02:22,600
And the way we do that we work with the event handlers that react provide.

37
00:02:23,060 --> 00:02:28,320
And there's many of them and we're not gonna cover them all the way we're gonna do that as we're gonna

38
00:02:28,330 --> 00:02:32,640
be working with our project as we're all gonna be working with our tutorials.

39
00:02:32,740 --> 00:02:38,140
The moment the event handler is gonna come up we're just gonna have it the event and then we're gonna

40
00:02:38,140 --> 00:02:40,550
be working with that particular event.

41
00:02:40,570 --> 00:02:42,320
So in our case this is gonna be on click.

42
00:02:42,670 --> 00:02:47,560
So the moment I click on this button something should happen and here's the kicker.

43
00:02:47,560 --> 00:02:49,960
We are passing here the reference.

44
00:02:49,960 --> 00:02:51,310
This is very important.

45
00:02:51,310 --> 00:02:56,810
So first of all we need to say this and then we're looking for the handle click and this is where you

46
00:02:57,010 --> 00:03:02,440
really need to careful because otherwise if you're gonna pass this there's that and then handle click

47
00:03:02,800 --> 00:03:04,580
and then you're gonna run the function.

48
00:03:04,700 --> 00:03:06,430
And this is not what you would want.

49
00:03:06,470 --> 00:03:12,430
And instead what happens is it right away runs six times where you have you click me and this is not

50
00:03:12,430 --> 00:03:13,570
what we're looking for.

51
00:03:13,570 --> 00:03:18,850
So we're passing here as a reference later on we're gonna be covering what happens as we're passing

52
00:03:18,850 --> 00:03:19,960
here the data.

53
00:03:19,960 --> 00:03:23,420
So then again there's gonna be multiple ways that we can do this.

54
00:03:23,440 --> 00:03:28,120
So in fact we're going to be passing here the arrow function and then the function is gonna be returned

55
00:03:28,120 --> 00:03:29,440
and so on and so forth.

56
00:03:29,830 --> 00:03:34,120
But we're not covering that right now for the simple method.

57
00:03:34,120 --> 00:03:39,640
Please please please one more time please remember that you are working with the reference.

58
00:03:39,640 --> 00:03:44,380
You're not running the function you're referencing this function the moment this is gonna be clicked

59
00:03:44,740 --> 00:03:46,060
then the function is gonna run.

60
00:03:46,600 --> 00:03:48,040
So at the moment I'm going say it.

61
00:03:48,400 --> 00:03:49,480
Then I have my buttons.

62
00:03:49,480 --> 00:03:55,700
And notice as I'm clicking everything is working awesome I'm just having a bunch of click meet.

63
00:03:55,900 --> 00:04:00,970
And actually the more components I have the more buttons I'm gonna have and the more click means.

64
00:04:01,090 --> 00:04:03,580
Eventually I'm gonna get knock.

65
00:04:03,750 --> 00:04:08,390
So at the moment you might be looking at your like how awesome everything is working fine.

66
00:04:08,530 --> 00:04:14,710
However let me give you a mind grenade where you're just gonna be considering that maybe everything

67
00:04:14,710 --> 00:04:17,100
is not working so well as you thought.

68
00:04:17,140 --> 00:04:21,580
So let's say there is a state and for now we can create it as a simple state.

69
00:04:21,580 --> 00:04:24,560
But later on we're gonna have to create a constructor anyway.

70
00:04:24,700 --> 00:04:27,880
But I can tell you right away this is not going to change anything.

71
00:04:28,240 --> 00:04:31,070
It would work exactly the same way for both of them.

72
00:04:31,300 --> 00:04:37,340
Whether we are sitting in constructor war or whether we're sitting here in the simple state and let's

73
00:04:37,340 --> 00:04:39,710
say the count is going to be 1.

74
00:04:39,800 --> 00:04:40,170
OK.

75
00:04:40,190 --> 00:04:44,030
So some kind of variable and we already know that we can access the variable.

76
00:04:44,240 --> 00:04:49,100
So why don't we say like this why are we saying you click me then we'll be number one and then we're

77
00:04:49,100 --> 00:04:51,060
going to be looking for this variable.

78
00:04:51,110 --> 00:04:56,690
So to say this not state and then I'm going to be looking for account and let's see what's going to

79
00:04:56,690 --> 00:04:57,240
happen.

80
00:04:57,650 --> 00:04:57,920
OK.

81
00:04:57,990 --> 00:05:01,520
So the buttons were rendered very successfully.

82
00:05:01,520 --> 00:05:02,270
Great.

83
00:05:02,290 --> 00:05:03,790
Everything's working fine.

84
00:05:03,950 --> 00:05:06,440
But what happens when you click the button.

85
00:05:06,440 --> 00:05:08,860
Well I have a big fan error.

86
00:05:08,930 --> 00:05:12,100
Now you might be asking well why is there.

87
00:05:12,140 --> 00:05:14,330
Because it says here state is undefined.

88
00:05:14,930 --> 00:05:16,270
But I mean we do have the state.

89
00:05:16,280 --> 00:05:17,840
So what is the issue.

90
00:05:17,840 --> 00:05:24,080
Well here's the problem within the US five because at the moment you're not looking at the arrow function

91
00:05:24,620 --> 00:05:26,430
you're looking at the regular function.

92
00:05:26,510 --> 00:05:28,480
Even though this is a method.

93
00:05:28,520 --> 00:05:32,260
What happens is this function creates its own context.

94
00:05:32,990 --> 00:05:36,950
So you need to bind this keyword.

95
00:05:36,950 --> 00:05:40,520
So it would point back to the instance of this class.

96
00:05:41,060 --> 00:05:49,130
Otherwise this is going to be pointing to the actual its own context and then this there is not this

97
00:05:49,490 --> 00:05:50,710
in this function.

98
00:05:50,780 --> 00:05:54,400
So that's why it's saying well you don't have no state what are you talking about.

99
00:05:54,440 --> 00:05:55,290
You want to state.

100
00:05:55,340 --> 00:05:58,870
OK I can get you in the state but I create my own context.

101
00:05:58,970 --> 00:06:00,890
I already have this and this is not work.

102
00:06:01,520 --> 00:06:06,640
So like I said we would need to bind it or create this as an our function.

103
00:06:06,980 --> 00:06:12,570
So why don't we first take a look at how we can find it and then we're gonna set it up as a normal function.

104
00:06:12,600 --> 00:06:17,500
So for us again we have the Constructor that would be the method that is going to run every time we're

105
00:06:17,500 --> 00:06:19,040
gonna instantiate the class.

106
00:06:19,220 --> 00:06:25,120
Then we're also going to have to use the super and they're all gonna write props and this is where we're

107
00:06:25,120 --> 00:06:27,080
gonna be setting up our handle.

108
00:06:27,520 --> 00:06:29,120
So in this case we're gonna do it like this.

109
00:06:29,130 --> 00:06:30,380
When I say this don't.

110
00:06:30,600 --> 00:06:36,730
Then the name of the method that we have and then we're going to be looking for this that handle click

111
00:06:37,000 --> 00:06:41,670
again twice and then we need to bind it and we need to bind it to this.

112
00:06:41,710 --> 00:06:44,630
So in this case what's gonna happen the moment I'm gonna save it.

113
00:06:44,650 --> 00:06:45,440
Check this out.

114
00:06:45,640 --> 00:06:47,260
Now everything is working fine.

115
00:06:47,320 --> 00:06:48,470
Have you clicked me.

116
00:06:48,580 --> 00:06:55,510
And then I have the one because in this case we're binding the context that the handle click has to

117
00:06:55,510 --> 00:06:58,240
the actual class here that we are working.

118
00:06:58,630 --> 00:07:00,790
And again we can do the same thing here.

119
00:07:00,820 --> 00:07:06,870
I can just move it and you'll see that it's still going to work so maybe right after props.

120
00:07:06,880 --> 00:07:13,960
I say again this is the art state and then we're gonna be again using the handle click method.

121
00:07:13,960 --> 00:07:15,300
That would be the basic set.

122
00:07:15,610 --> 00:07:17,650
And that would be one of the ways that we can do.

123
00:07:18,010 --> 00:07:24,330
However if you are turned off by this long syntax and you're like There's no way I'm to remember this

124
00:07:24,450 --> 00:07:31,120
knock I react as a solution for you because again I will repeat myself but there's multiple ways how

125
00:07:31,120 --> 00:07:31,550
we can do it.

126
00:07:31,880 --> 00:07:36,960
So let me comment this out as well as this guy just so you have the future reference.

127
00:07:37,120 --> 00:07:39,410
And why don't we rewrite this.

128
00:07:39,540 --> 00:07:44,810
Why don't we say like this why do we say no click then this is gonna be my error or function somewhere

129
00:07:44,880 --> 00:07:51,450
say something like this then I'm obviously going to have just some kind of implicit return.

130
00:07:51,450 --> 00:07:55,360
And in this case I'm just going to say that there's gonna be some kind of console logs.

131
00:07:55,530 --> 00:08:02,800
So we're gonna write console log on so log and then for this console log why don't we are you know what.

132
00:08:02,940 --> 00:08:04,590
Let's just rewrite a little bit.

133
00:08:04,590 --> 00:08:08,510
Let me write the curly braces because we're gonna have multiple lines.

134
00:08:08,520 --> 00:08:14,250
So might as well do that oh we're gonna write console log console log.

135
00:08:14,250 --> 00:08:16,310
Then we're gonna do the same thing right.

136
00:08:16,350 --> 00:08:21,180
We had console log you click me and that's not what I wanted.

137
00:08:21,240 --> 00:08:22,650
Let me again undo it.

138
00:08:22,650 --> 00:08:25,570
So were you collect me.

139
00:08:25,570 --> 00:08:28,360
That would be one thing and now I'm going to copy and paste it.

140
00:08:28,540 --> 00:08:34,420
And now we can access the state because the difference is that with the arrow functions they are not

141
00:08:34,420 --> 00:08:36,250
creating their own context.

142
00:08:36,250 --> 00:08:38,810
So that is the reason why we don't need to bind anything.

143
00:08:38,870 --> 00:08:43,660
You could just write it here as the handle click and everything is gonna be working fine.

144
00:08:43,660 --> 00:08:45,370
So at the moment I'm gonna save it.

145
00:08:45,370 --> 00:08:46,030
Check this out.

146
00:08:46,420 --> 00:08:49,060
So as I'm clicking everything is working fine.

147
00:08:49,180 --> 00:08:56,380
So we are affecting this thing and this would be in general your two choices your possible choices where

148
00:08:56,380 --> 00:09:02,860
if you want to bind them you can just write it as a he has five or if you don't want to bind them you

149
00:09:02,860 --> 00:09:08,200
can just use the arrow functions and use the syntax and everything is going to be working fine.

150
00:09:08,200 --> 00:09:13,930
Again just remember that you will gonna be passing the reference later on we're gonna look at the other

151
00:09:13,930 --> 00:09:16,980
scenario where we're passing some kind of information.

152
00:09:17,020 --> 00:09:22,960
So this is gonna be changing however for the simple functions you're just passing the reference that's

153
00:09:22,960 --> 00:09:28,360
all and then everything is gonna be working fine depending on which situation you're going to choose

154
00:09:28,810 --> 00:09:33,340
whether you're going to be binding the regular function or you're going to be choosing the arrow function.