1
00:00:01,110 --> 00:00:03,090
‫Handling events in React

2
00:00:03,090 --> 00:00:05,610
‫is actually pretty straightforward

3
00:00:05,610 --> 00:00:07,893
‫and so let's now learn how it's done.

4
00:00:09,360 --> 00:00:10,980
‫So, as you can imagine,

5
00:00:10,980 --> 00:00:14,490
‫we are not going to use the addEventListener here

6
00:00:14,490 --> 00:00:18,600
‫because that is the imperative way of building UIs.

7
00:00:18,600 --> 00:00:21,960
‫But here in React we use a more declarative approach.

8
00:00:21,960 --> 00:00:25,080
‫So we do not manually select DOM elements,

9
00:00:25,080 --> 00:00:29,070
‫and so therefore, we do also not use addEventListener.

10
00:00:29,070 --> 00:00:31,080
‫Instead we use something similar

11
00:00:31,080 --> 00:00:34,320
‫to the HTML inline event listener.

12
00:00:34,320 --> 00:00:38,100
‫So instead in React we do something very similar

13
00:00:38,100 --> 00:00:41,310
‫to the HTML inline event listener.

14
00:00:41,310 --> 00:00:43,620
‫So basically we will directly listen

15
00:00:43,620 --> 00:00:48,540
‫for the event right on the element where they will happen.

16
00:00:48,540 --> 00:00:51,850
‫So right here on the button, for example, we can use the

17
00:00:51,850 --> 00:00:56,850
‫onClick prop, and then we simply specify a function here.

18
00:00:57,780 --> 00:01:01,320
‫So, the "Click" is the event name

19
00:01:01,320 --> 00:01:04,080
‫and then we always prefix it with the "on".

20
00:01:04,080 --> 00:01:06,570
‫And then we need to write it in camel case.

21
00:01:06,570 --> 00:01:08,500
‫While in inline HTML

22
00:01:09,480 --> 00:01:11,820
‫we would write it like this.

23
00:01:11,820 --> 00:01:14,820
‫So like this, and then specifying a string.

24
00:01:14,820 --> 00:01:16,740
‫So no camel case,

25
00:01:16,740 --> 00:01:19,770
‫but this is not HTML it is JSX

26
00:01:19,770 --> 00:01:21,600
‫and so it's slightly different

27
00:01:21,600 --> 00:01:24,120
‫just as we learned before in the lecture

28
00:01:24,120 --> 00:01:26,730
‫about the rules on JSX.

29
00:01:26,730 --> 00:01:29,820
‫So, again, we will pass in here now a function

30
00:01:29,820 --> 00:01:32,010
‫and that function will then be executed

31
00:01:32,010 --> 00:01:36,270
‫whenever there is a click happening on this DOM element.

32
00:01:36,270 --> 00:01:39,630
‫So in this case, on this button right here.

33
00:01:39,630 --> 00:01:43,350
‫So, let's create a quick arrow function here.

34
00:01:43,350 --> 00:01:46,180
‫And all I'm going to do now is to alert

35
00:01:47,220 --> 00:01:48,780
‫something,

36
00:01:48,780 --> 00:01:52,980
‫let's say "Previous", and this should already be working.

37
00:01:52,980 --> 00:01:55,170
‫So if I click here now,

38
00:01:55,170 --> 00:01:57,990
‫then yes, we get the alert

39
00:01:57,990 --> 00:02:00,660
‫that is saying "Previous".

40
00:02:00,660 --> 00:02:03,873
‫and we can do the same thing on the other button.

41
00:02:05,910 --> 00:02:07,317
‫And here we say "Next".

42
00:02:08,190 --> 00:02:11,643
‫And so of course then here we will get a different message.

43
00:02:13,560 --> 00:02:15,360
‫And that's essentially it.

44
00:02:15,360 --> 00:02:19,020
‫So this is how we handle events The React way.

45
00:02:19,020 --> 00:02:20,340
‫no addEventListeners,

46
00:02:20,340 --> 00:02:23,640
‫but instead we specify an event listener function

47
00:02:23,640 --> 00:02:26,640
‫directly on the element using, in this case,

48
00:02:26,640 --> 00:02:28,440
‫the onClick prop.

49
00:02:28,440 --> 00:02:31,020
‫But it could be any other event as well,

50
00:02:31,020 --> 00:02:33,573
‫So we can specify another event handler.

51
00:02:34,650 --> 00:02:38,853
‫So let's use the onMouseEnter.

52
00:02:39,900 --> 00:02:42,810
‫And so now here again, we need to specify a function

53
00:02:42,810 --> 00:02:45,270
‫and it's really, really important to understand

54
00:02:45,270 --> 00:02:48,693
‫that it is not a function call, but really a function.

55
00:02:49,530 --> 00:02:51,093
‫So we cannot simply write,

56
00:02:52,620 --> 00:02:53,453
‫alert,

57
00:02:54,367 --> 00:02:55,740
‫"TEST", for example

58
00:02:55,740 --> 00:02:58,353
‫because watch what happens now as I save.

59
00:02:59,490 --> 00:03:03,630
‫So you see, immediately we got this "TEST" right here,

60
00:03:03,630 --> 00:03:06,510
‫and not when a hover over the button.

61
00:03:06,510 --> 00:03:08,400
‫So why is that?

62
00:03:08,400 --> 00:03:09,233
‫Well, basically,

63
00:03:09,233 --> 00:03:12,150
‫as soon as React initializes this component,

64
00:03:12,150 --> 00:03:15,690
‫so when it first calls this app function,

65
00:03:15,690 --> 00:03:18,000
‫it'll then see this code.

66
00:03:18,000 --> 00:03:19,980
‫And so here we are calling alert

67
00:03:19,980 --> 00:03:22,350
‫and so then, that's exactly what it does.

68
00:03:22,350 --> 00:03:23,850
‫React will read this code

69
00:03:23,850 --> 00:03:26,280
‫and then here it finds this function call.

70
00:03:26,280 --> 00:03:28,743
‫And so it will immediately call this function.

71
00:03:29,760 --> 00:03:31,470
‫But again, that's not what we want.

72
00:03:31,470 --> 00:03:35,100
‫We want to basically define a callback function

73
00:03:35,100 --> 00:03:37,590
‫which will be called at a later time.

74
00:03:37,590 --> 00:03:40,020
‫And that later time is in this case

75
00:03:40,020 --> 00:03:42,633
‫when the mouse enters this element.

76
00:03:43,890 --> 00:03:45,660
‫So you see that now nothing happened,

77
00:03:45,660 --> 00:03:49,230
‫but as soon as the mouse hovers here,

78
00:03:49,230 --> 00:03:51,900
‫then this function is called.

79
00:03:51,900 --> 00:03:56,580
‫So this function is called and, then we get our alert.

80
00:03:56,580 --> 00:04:00,900
‫So again, very, very important, do not call a function here

81
00:04:00,900 --> 00:04:03,483
‫but really specify a function value.

82
00:04:04,710 --> 00:04:07,170
‫Somehow we got that again here,

83
00:04:07,170 --> 00:04:08,520
‫but nevermind.

84
00:04:08,520 --> 00:04:11,580
‫So this was just a test anyway, let's get rid of this.

85
00:04:11,580 --> 00:04:14,160
‫This was just to show you that we can listen, of course,

86
00:04:14,160 --> 00:04:16,800
‫to more than just a click event.

87
00:04:16,800 --> 00:04:17,633
‫Now usually

88
00:04:17,633 --> 00:04:21,420
‫we do not directly define the event handler function

89
00:04:21,420 --> 00:04:23,640
‫right here in the onClick prop,

90
00:04:23,640 --> 00:04:26,040
‫but instead we create a separate function

91
00:04:26,040 --> 00:04:28,263
‫and then pass that function in here.

92
00:04:29,250 --> 00:04:30,840
‫So let's do that now.

93
00:04:30,840 --> 00:04:35,100
‫And, so usually we create those event handler functions

94
00:04:35,100 --> 00:04:36,573
‫right here in the component.

95
00:04:37,440 --> 00:04:40,290
‫So that's something new that we haven't done before,

96
00:04:40,290 --> 00:04:42,060
‫but that's perfectly fine.

97
00:04:42,060 --> 00:04:44,770
‫We can define any functions that we want

98
00:04:46,140 --> 00:04:49,140
‫here, right inside the component body.

99
00:04:49,140 --> 00:04:51,333
‫And let's call this one handlePrevious,

100
00:04:54,540 --> 00:04:58,320
‫And this handle part here in the event handler function

101
00:04:58,320 --> 00:05:01,320
‫is pretty standard in React development.

102
00:05:01,320 --> 00:05:03,300
‫So you will see this all the time,

103
00:05:03,300 --> 00:05:06,990
‫and so then you know immediately that this function

104
00:05:06,990 --> 00:05:08,670
‫is an event handler function

105
00:05:08,670 --> 00:05:10,860
‫that is probably being used somewhere

106
00:05:10,860 --> 00:05:13,770
‫in the JSX of that component.

107
00:05:13,770 --> 00:05:16,713
‫In this case, it's going to be used right here.

108
00:05:18,390 --> 00:05:20,520
‫So, handlePrevious.

109
00:05:20,520 --> 00:05:23,343
‫And what we want to do here, again for now,

110
00:05:26,130 --> 00:05:28,710
‫is just to alert "Previous".

111
00:05:28,710 --> 00:05:32,133
‫So if we click here now, that's going to work still.

112
00:05:33,000 --> 00:05:37,980
‫Great. And once again, really, really important to notice

113
00:05:37,980 --> 00:05:41,580
‫that here, we are just passing in the function value.

114
00:05:41,580 --> 00:05:43,170
‫So we are not calling it,

115
00:05:43,170 --> 00:05:45,570
‫because if we were calling it,

116
00:05:45,570 --> 00:05:49,560
‫then again, we would immediately see that "Previous".

117
00:05:49,560 --> 00:05:53,190
‫So React would then immediately run this code here

118
00:05:53,190 --> 00:05:54,123
‫as it sees it.

119
00:05:56,580 --> 00:05:57,413
‫All right.

120
00:05:58,320 --> 00:06:01,620
‫But like this, we are only passing in the function.

121
00:06:01,620 --> 00:06:04,923
‫Or of course, we could also do this.

122
00:06:06,270 --> 00:06:08,850
‫But of course, that's very redundant.

123
00:06:08,850 --> 00:06:13,230
‫So now we are back to just having a function here, right?

124
00:06:13,230 --> 00:06:15,660
‫It's just a function that calls another one,

125
00:06:15,660 --> 00:06:17,910
‫so that's not very effective.

126
00:06:17,910 --> 00:06:20,673
‫But sometimes we will have to do something similar.

127
00:06:21,600 --> 00:06:24,930
‫But for now, this is the way that makes sense.

128
00:06:24,930 --> 00:06:28,680
‫And so let's now quickly create another one.

129
00:06:28,680 --> 00:06:31,173
‫So again, this is usually the way we do it.

130
00:06:32,430 --> 00:06:36,180
‫So creating a function which starts with handle,

131
00:06:36,180 --> 00:06:38,970
‫and then we simply pass that function here

132
00:06:38,970 --> 00:06:43,500
‫into the onClick prop or any other prop that we can use

133
00:06:43,500 --> 00:06:45,243
‫to handle some other event.

134
00:06:46,770 --> 00:06:48,960
‫All right, just to make sure that it works,

135
00:06:48,960 --> 00:06:50,433
‫and indeed it does.

136
00:06:51,810 --> 00:06:56,460
‫Great. So, this is how we handle events typically in React.

137
00:06:56,460 --> 00:06:57,293
‫But of course,

138
00:06:57,293 --> 00:07:00,570
‫now we actually want something meaningful to happen here.

139
00:07:00,570 --> 00:07:01,620
‫And in particular,

140
00:07:01,620 --> 00:07:06,620
‫we want to basically change this step value here, right?

141
00:07:07,110 --> 00:07:10,410
‫And for that, we need something called state.

142
00:07:10,410 --> 00:07:13,350
‫Now, we have touched on state many times already

143
00:07:13,350 --> 00:07:16,560
‫but now it's time to really learn what state is

144
00:07:16,560 --> 00:07:18,993
‫and then how we can use it in practice.