1
00:00:00,180 --> 00:00:01,310
Not bad, not bad.

2
00:00:01,350 --> 00:00:09,660
We now know how we can render list of objects and actually wrap it into our component, but the next

3
00:00:09,660 --> 00:00:14,780
thing that I want to talk about is, of course, events, because everything is nice.

4
00:00:15,210 --> 00:00:16,380
We have our list.

5
00:00:16,770 --> 00:00:25,740
But of course, what makes applications so appealing is the fact that we can start responding to user

6
00:00:25,740 --> 00:00:26,130
events.

7
00:00:26,280 --> 00:00:31,950
So essentially, when the user clicks the button or hovers over the card or whatever.

8
00:00:32,700 --> 00:00:36,720
Now, the problem is that we haven't covered yet the state.

9
00:00:37,320 --> 00:00:44,310
So in our examples or just the old console logs where maybe throw in some alert, essentially this is

10
00:00:44,310 --> 00:00:46,770
just to give you a general idea.

11
00:00:47,160 --> 00:00:54,960
When we cover state, then of course, our examples are going to become more interesting because we

12
00:00:54,960 --> 00:01:00,450
will add some items, will remove some items, we'll toggle some info and all that good stuff.

13
00:01:00,750 --> 00:01:07,350
So this is just to give you a general overview, how the events will work and react.

14
00:01:07,650 --> 00:01:12,600
Now, as a side note, if you would like to see all the events, because in our example, we'll just

15
00:01:12,600 --> 00:01:20,280
take a look at the two hours, just Googling react events and then look for this link, the synthetic

16
00:01:20,280 --> 00:01:20,790
event.

17
00:01:21,000 --> 00:01:28,920
And then if you keep on scrolling numbers in React Docs, you'll find all the possible events that react

18
00:01:28,920 --> 00:01:29,460
supports.

19
00:01:29,460 --> 00:01:36,180
Again, in our example, we'll just take a look at two one on hover and the second one on click, so

20
00:01:36,180 --> 00:01:38,670
I'll never get back to our project.

21
00:01:39,580 --> 00:01:42,340
And we'll work in the book component.

22
00:01:42,910 --> 00:01:47,300
So what do we need in order to set up a vent in react?

23
00:01:47,770 --> 00:01:52,360
First of all, we need to the attribute so right here attribute.

24
00:01:52,570 --> 00:01:55,430
And then the second one is the event handler.

25
00:01:55,780 --> 00:02:02,920
Now, the one thing that is different from the JavaScript is that since we're setting this up in line

26
00:02:03,430 --> 00:02:07,350
again, we need to make sure that we're using the camera cache.

27
00:02:07,750 --> 00:02:12,400
So instead of on click all lowercase like you would normally, right.

28
00:02:12,400 --> 00:02:17,350
As far as line JavaScript, in this case, we need to set this up with a camera case, which would mean

29
00:02:17,590 --> 00:02:25,720
on click on line, like I said in our video, we'll take a look at the on click event on the second

30
00:02:25,720 --> 00:02:28,030
one will be on mouseover.

31
00:02:28,330 --> 00:02:33,110
But I just showed you where you can find rest of the event as well.

32
00:02:33,550 --> 00:02:37,410
Now, the way we set that up, first I'm going to create a button.

33
00:02:37,720 --> 00:02:43,210
Now, technically, you don't have to create a button for the unclick course.

34
00:02:43,210 --> 00:02:47,170
You can attach it to an for one to the whole article if you want.

35
00:02:47,170 --> 00:02:54,550
But just to be more correct, I'm going to add a button so out here type so that it will be a button.

36
00:02:54,760 --> 00:02:59,520
And then like I said, in order to set up a vent, we would need to have the attribute.

37
00:02:59,680 --> 00:03:04,870
And since I would want to listen for clearance, I simply will go with on Click.

38
00:03:05,110 --> 00:03:10,450
And like I just mentioned, we would need to set this up as a camera case.

39
00:03:10,480 --> 00:03:18,640
So on click and then we need to have our handler now all set up multiple examples because we have multiple

40
00:03:18,640 --> 00:03:26,170
options, just so you can see whichever makes more sense to you, so we can set it up as a reference

41
00:03:26,200 --> 00:03:29,260
or we can set it up as a inline function.

42
00:03:29,500 --> 00:03:31,270
How we would set up as a reference.

43
00:03:31,280 --> 00:03:33,660
Well, in here I could come up with a function.

44
00:03:34,030 --> 00:03:36,970
So it's a click and learn.

45
00:03:37,850 --> 00:03:45,260
And then, of course, we are having our function and then we just need to pass it as a reference so

46
00:03:45,260 --> 00:03:49,520
we have Clerck Handler and then we pass it here on Kallick.

47
00:03:49,730 --> 00:03:51,160
So our Klick handler.

48
00:03:51,470 --> 00:03:57,320
Now, what I would want to do over here, well, I could just go simply with alert and her little world

49
00:03:57,650 --> 00:03:59,840
and you'll see that first.

50
00:03:59,840 --> 00:04:00,580
We'll have the button.

51
00:04:00,590 --> 00:04:02,410
But of course I skip the name.

52
00:04:02,720 --> 00:04:11,240
So let me right here reference example and then you'll see that I have a button that is the reference

53
00:04:11,240 --> 00:04:11,740
example.

54
00:04:11,900 --> 00:04:15,610
And the moment you click it, you have the Hello World beautiful.

55
00:04:16,040 --> 00:04:21,520
So we know how we can respond to the first event, the click of it.

56
00:04:21,860 --> 00:04:24,730
So that is going to be a reference example.

57
00:04:25,160 --> 00:04:30,840
But like I just said, we also have an option of sending this up as a inline function.

58
00:04:31,190 --> 00:04:39,200
Now, what that means is that I could simply place my function here instead of setting this up as a

59
00:04:39,200 --> 00:04:39,620
reference.

60
00:04:40,040 --> 00:04:41,180
How is that going to look like?

61
00:04:41,210 --> 00:04:46,400
Well, in this case, I think I'm going to go with having one just so it can spice things up.

62
00:04:46,760 --> 00:04:51,500
Just please keep in mind, of course, as far as accessibility, that is not the best case scenario.

63
00:04:51,500 --> 00:04:53,030
But let's just go with that.

64
00:04:53,040 --> 00:04:59,720
So we'll have unclick then, like I said, click and there will become my inline function.

65
00:05:00,500 --> 00:05:07,100
And in here I simply say that I would like to console log and I just want to showcase that.

66
00:05:07,100 --> 00:05:15,530
Of course, within of this function, I can access my variables, my props, and for the time being,

67
00:05:15,530 --> 00:05:17,300
I'll just go with a title.

68
00:05:17,690 --> 00:05:23,650
So once we click on a title in a console, we should also see the title.

69
00:05:23,810 --> 00:05:30,650
So let's say I'm going to go with console and then once I click on a title N, now I'm getting that

70
00:05:30,650 --> 00:05:34,310
specific title that is displayed.

71
00:05:34,850 --> 00:05:38,270
So for each and every book, of course title is unique.

72
00:05:38,630 --> 00:05:43,060
And then once we click on the title, then of course we can see it in a console log.

73
00:05:43,370 --> 00:05:48,060
Please keep in mind that both of them are doing the same thing right now, OK?

74
00:05:48,320 --> 00:05:55,010
In one case, we have the inline function that has the functionality and in the second case we have

75
00:05:55,160 --> 00:05:56,560
the reference.

76
00:05:56,750 --> 00:06:02,690
So now we're referencing the function and again, we have some kind of functionality so you can choose

77
00:06:02,690 --> 00:06:05,000
whichever option makes sense to you.

78
00:06:05,450 --> 00:06:11,100
Now, the Gocha is going to be when we would want to pass some kind of value.

79
00:06:11,600 --> 00:06:16,550
So this is going to be later on where, for example, we would want to delete the item for the list.

80
00:06:16,760 --> 00:06:20,930
We would need to pass the actual ID so we know which item to delete.

81
00:06:21,200 --> 00:06:27,170
So again, in this case, we won't delete the item from the list or we'll take a look at what happens

82
00:06:27,530 --> 00:06:31,110
if we are passing in that item, because this is going to be a gotcha.

83
00:06:31,370 --> 00:06:38,600
So in here, I'll set up another button and I'll say again, type is equal to a button and then we'll

84
00:06:38,600 --> 00:06:41,720
have it on click for time being.

85
00:06:42,080 --> 00:06:46,220
We'll just leave it empty and also say more complex.

86
00:06:46,780 --> 00:06:48,140
A sample.

87
00:06:48,440 --> 00:06:49,380
All right, good.

88
00:06:49,850 --> 00:06:58,490
So what if I would have a function and I'll call this const and complex example.

89
00:06:59,000 --> 00:07:01,670
And then again, we're setting up our function.

90
00:07:01,970 --> 00:07:06,050
And in this function, I will get the author.

91
00:07:06,260 --> 00:07:10,330
I can get the idea, I can get the title, I can even get the image if I want.

92
00:07:10,580 --> 00:07:17,850
But let's just imagine that I would want to log this author each and every time when I look at.

93
00:07:18,280 --> 00:07:24,210
OK, now what's important, though, is that this will be passed dynamically.

94
00:07:24,500 --> 00:07:27,920
It's not like in here where I have a login and I'm just accessing the title.

95
00:07:28,220 --> 00:07:35,950
We need to imagine that in this function, in the complex example, I'm looking for that as an argument.

96
00:07:36,260 --> 00:07:39,030
So say here that I will pass in the author.

97
00:07:39,470 --> 00:07:47,900
Now you'll notice that if I just run my complex example and if I pass in the author, well, yeah,

98
00:07:47,900 --> 00:07:53,940
technically it will work, but it will work the moment I render my application.

99
00:07:54,350 --> 00:07:58,690
So the moment I render notice, I run all three of them.

100
00:07:59,210 --> 00:08:01,360
So I have all three of us over here.

101
00:08:01,790 --> 00:08:03,270
So why do you think is that happening?

102
00:08:03,860 --> 00:08:07,580
Well, because here notice I invoke this function.

103
00:08:07,910 --> 00:08:12,890
I invoke at the moment I run my application and that is now what I'm looking for.

104
00:08:13,310 --> 00:08:17,730
Of course, what I would want is run it only once I click it.

105
00:08:18,350 --> 00:08:19,130
So here's the thing.

106
00:08:19,130 --> 00:08:26,390
If you have this kind of situation where you must pass the argument into the function, you'll have

107
00:08:26,390 --> 00:08:28,360
to first set up a function.

108
00:08:28,730 --> 00:08:35,460
So here we'll start with an end line and then we can either set up the curly braces if we want.

109
00:08:35,480 --> 00:08:36,530
That's definitely an option.

110
00:08:36,860 --> 00:08:37,340
Or we can.

111
00:08:37,410 --> 00:08:43,350
Simply say, not once I click, then I would want to run the function again, that is going to be the

112
00:08:43,350 --> 00:08:47,580
case if you must pass this into as an argument.

113
00:08:47,590 --> 00:08:53,850
And again, this is going to be for more complex scenarios where we'll start passing data, for example,

114
00:08:54,540 --> 00:08:57,240
to the database or will be removing items.

115
00:08:57,290 --> 00:08:59,770
Again, this is not going to be just one simple concept.

116
00:09:00,030 --> 00:09:04,570
Of course, at the moment, you can just simply argue, well, I would write it as an inline function.

117
00:09:04,590 --> 00:09:06,670
There's going to be cases where you cannot do that.

118
00:09:06,690 --> 00:09:08,840
That's why, of course, I'm showing you this.

119
00:09:09,090 --> 00:09:15,630
So now, of course, what happens once I click on more complex example, only then I run it because

120
00:09:15,630 --> 00:09:21,960
we need to understand that once we start up the application, we run our function or our function.

121
00:09:22,170 --> 00:09:24,740
And then, of course, we return the complex example.

122
00:09:24,750 --> 00:09:29,660
And only then once we're connected, then we invoke our complex example.

123
00:09:29,940 --> 00:09:36,300
Also, I would like to mention that in all the functions, in all our event handlers, we can access

124
00:09:36,300 --> 00:09:37,460
the event object.

125
00:09:37,710 --> 00:09:41,640
In this case, I'll just show you with one with a click handler.

126
00:09:41,640 --> 00:09:47,010
Just please understand, of course, you can access in all of them where essentially we have our event

127
00:09:47,010 --> 00:09:49,410
object and we can do things.

128
00:09:49,410 --> 00:09:55,080
We can control the event and also, for example, go for event target.

129
00:09:55,360 --> 00:10:00,360
That's probably going to be the most useful scenario because normally you'll use this.

130
00:10:00,360 --> 00:10:05,940
We input a lot where we'll be looking for the name will be looking for the value and all the good stuff

131
00:10:06,120 --> 00:10:06,790
for the button.

132
00:10:06,960 --> 00:10:09,500
We'll just take a look at what we're clicking on.

133
00:10:09,750 --> 00:10:11,290
So remember, that was the first one.

134
00:10:11,310 --> 00:10:17,010
So once I click on this, I have my work that is beautiful and then I have my whole big event.

135
00:10:17,400 --> 00:10:21,570
So, of course, we can find a bunch of useful info here.

136
00:10:21,840 --> 00:10:24,450
But also I have what I'm clicking on.

137
00:10:24,600 --> 00:10:27,060
So that is my target.

138
00:10:27,250 --> 00:10:33,600
This is something that we will use quite often, especially once we start working with the input.

139
00:10:33,750 --> 00:10:40,860
And the second event, I would want to take a look at it on mouseover, which essentially occurs when

140
00:10:40,860 --> 00:10:45,270
the mouse pointer is moved on to a element.

141
00:10:45,690 --> 00:10:53,910
So I can set this up anywhere I would like, but I think I'm going to go with an article just to make

142
00:10:53,910 --> 00:10:54,540
it interesting.

143
00:10:54,850 --> 00:10:56,790
So first, I'm looking for my attribute.

144
00:10:56,940 --> 00:10:59,700
I'm looking for mouse over.

145
00:10:59,880 --> 00:11:01,860
And then again, we have the handler.

146
00:11:02,190 --> 00:11:10,350
Now, in this case, I'll pass this as in one hour instead of just implicit Latrun like we had before.

147
00:11:10,560 --> 00:11:15,780
Now, of course, notice I'm setting up the curly braces and again, I will do some kind of functionality

148
00:11:15,800 --> 00:11:16,130
over here.

149
00:11:16,680 --> 00:11:22,110
This is just the showcase that regardless whether you go with implicit return or you're setting up the

150
00:11:22,110 --> 00:11:24,410
curly braces, it will work.

151
00:11:24,690 --> 00:11:28,230
So we have our own mouse over beautiful.

152
00:11:28,510 --> 00:11:30,960
And we're going to go with some kind of function.

153
00:11:31,410 --> 00:11:36,660
And I don't know, I'm just going to go with a log and I would like a log.

154
00:11:37,030 --> 00:11:39,360
I guess we have been logging the author.

155
00:11:39,540 --> 00:11:41,220
Why don't we cancel log the title?

156
00:11:41,520 --> 00:11:48,040
Because we can still access that specific title for each and every component.

157
00:11:48,420 --> 00:11:55,020
So now what happens as I hover over it the moment my mouse moves on to the element?

158
00:11:55,230 --> 00:11:59,400
Now, of course, I'm going to logging the title of the book.

159
00:11:59,670 --> 00:12:03,890
So each and every time I do that, notice how I increase the amount in a console.

160
00:12:04,080 --> 00:12:12,930
So if I'll move my mouse onto a different kind, of course I will console log that particular title.

161
00:12:13,170 --> 00:12:15,260
So that's how we can work with events.

162
00:12:15,390 --> 00:12:20,370
So essentially those are the basics of how we can listen for events in react.