WEBVTT

0
00:00.210 --> 00:07.230
Hey guys. In this lesson I want to talk a bit more about handling events in React. How you can detect

1
00:07.290 --> 00:13.740
when the user interacts with your app or your components and how you can use React to render different

2
00:13.740 --> 00:15.950
things depending on those events.

3
00:17.040 --> 00:22.050
And this is the functionality that you will have built by the end of the lesson. As we mouse over the

4
00:22.050 --> 00:23.640
button it turns to black

5
00:23.670 --> 00:29.460
and when we mouse away from it it turns to white. And in order to be able to implement this functionality

6
00:29.550 --> 00:34.830
we'll bring together many other concepts that we've covered in the past lessons including conditional

7
00:34.830 --> 00:40.230
rendering, inline styling, mouse events and managing state.

8
00:40.390 --> 00:46.660
So go ahead and fork the starting sandbox and then we can get started.

9
00:46.690 --> 00:53.170
I've got a very simple form that I've created here which you'll notice is partly borrowed from our previous

10
00:53.230 --> 00:55.340
log in and registration screen.

11
00:55.450 --> 00:58.930
All it has is an <h1> that currently just says hello.

12
00:58.930 --> 01:06.090
It has an inputs of type text and a placeholder that is asking for a name to be typed in.

13
01:06.130 --> 01:08.830
Finally it's also got a submit button.

14
01:08.830 --> 01:11.630
So just three components, very simple.

15
01:11.680 --> 01:18.820
Now we've already seen previously that you can tap into very simple events such as when a button gets

16
01:18.820 --> 01:23.210
clicked via the attributes for those HMTL elements.

17
01:23.410 --> 01:27.370
So the attribute that we've already been using is the onClick.

18
01:27.370 --> 01:36.520
And remember again when we're converting HMTL elements into JSX or React Components the names

19
01:36.610 --> 01:39.910
of the attributes gets turned into camel case.

20
01:39.970 --> 01:46.930
So when the button gets clicked then we want to trigger some code. So we might have a function in our

21
01:47.320 --> 01:50.540
app which is called handleClick.

22
01:50.680 --> 01:59.050
And when this function gets fired all we're going to do for now is just to print clicked. And then I'm

23
01:59.050 --> 02:06.250
just going to pass the name of this function as the action that should be initiated when this button

24
02:06.310 --> 02:07.680
gets clicked.

25
02:07.690 --> 02:13.370
Now whenever I click on the submit button, you'll notice in the console we get the word clicked logged.

26
02:13.900 --> 02:17.080
And this happens every single time I press on this button.

27
02:17.110 --> 02:23.860
This is a clue that we can actually tap into this function and trigger any sort of code we want that

28
02:23.860 --> 02:27.420
is tied to this button being clicked.

29
02:27.420 --> 02:29.680
Now what kind of things might we want to do?

30
02:29.680 --> 02:34.390
Well maybe we want to change the text that's in our <h1>.

31
02:34.390 --> 02:39.550
So for example instead of just having the word hello in here, maybe I'll have a variable called heading

32
02:39.580 --> 02:46.180
Text. And this headingText is of course something that's going to have state because it's going to change

33
02:46.600 --> 02:48.940
when the button gets clicked.

34
02:48.940 --> 02:56.350
So I'm going to create my new stateful headingText and also a method for setting the headingText.

35
02:56.350 --> 02:58.760
So I've got headingText and setHeadingText

36
02:58.810 --> 03:04.510
and this is the common way that people tend to name these state variables and also the function for

37
03:04.510 --> 03:07.870
setting the state when they're using hooks.

38
03:08.140 --> 03:15.490
And then I'm going to set it to use state. And as soon as I hit enter my use state gets imported from

39
03:15.490 --> 03:19.360
React automatically because I'm using code sandbox.

40
03:19.360 --> 03:24.540
But if you're not using code sandbox, just be sure to remember to add that import.

41
03:24.560 --> 03:28.590
This useState is of course a function and inside the parentheses

42
03:28.600 --> 03:33.150
I get to give it a starting value. So let's set it to the string

43
03:33.190 --> 03:34.960
Hello.

44
03:35.020 --> 03:38.560
Now to start with my <h1> just says hello.

45
03:38.680 --> 03:44.830
And then what I want to happen is when this button gets clicked, I want to be at to change this word

46
03:44.890 --> 03:46.540
to submited.

47
03:46.630 --> 03:53.470
Well I can do that using my setHeadingText function that I created and I'm going to change the heading

48
03:53.470 --> 03:55.840
text to submited.

49
03:55.840 --> 04:03.850
So now whenever I click on this button, my <h1> gets updated to a new value which is the word submitted.

50
04:04.390 --> 04:06.580
But what other events are there?

51
04:06.580 --> 04:13.390
What else can we respond to other than a button being clicked?If you take a look at the documentation

52
04:13.390 --> 04:19.750
on w3schools.com on HTML event attributes, you can see that there's loads of them that you can choose

53
04:19.750 --> 04:27.820
from. And one that may be quite useful for us is something called on a mouse out and on mouse over.

54
04:28.300 --> 04:36.820
This allows us to detect when the mouse is hovering over or has hovered out of a particular element.

55
04:36.820 --> 04:37.150
All right.

56
04:37.150 --> 04:44.110
So at this point I want to pose a more difficult challenge to you. See if you can add the on mouse over

57
04:44.230 --> 04:53.170
and on mouse out attributes to our button here so that the end result is to be able to have your mouse

58
04:53.290 --> 04:59.750
hover over the submit button and for it to change its background color from white to black.

59
04:59.950 --> 05:05.260
But then as soon as your mouse leaves the button, the background color of the button changes back to

60
05:05.260 --> 05:12.580
white. And you're going to be using these two attributes. If you already know how to tackle this challenge,

61
05:12.640 --> 05:14.180
pause the video now.

62
05:14.230 --> 05:15.960
If not I'll give you another hint

63
05:16.000 --> 05:17.110
after a few seconds.

64
05:21.710 --> 05:22.030
All right.

65
05:22.090 --> 05:24.040
Here's my first hint.

66
05:24.130 --> 05:30.740
Remember that you can change the appearance of an HTML element by using the style attribute.

67
05:30.910 --> 05:38.470
So you can set it to, for example, a new object where the key is the style that you want to change,

68
05:38.470 --> 05:41.920
so in this case it's background color.

69
05:42.070 --> 05:48.700
But remember because this is Javascript, we have to use the camel cased version of it and then we set

70
05:48.700 --> 05:50.820
that equal to a string.

71
05:50.830 --> 05:53.400
So I'm going to set that equal to black.

72
05:53.620 --> 06:01.060
And now you'll see that my button changes to the black color. But of course this is not the goal.

73
06:01.090 --> 06:03.070
The goal is for it to change it to black

74
06:03.070 --> 06:08.500
only when my mouse is hovering inside and then change it back to white where my mouse is not hovering

75
06:08.500 --> 06:09.050
inside.

76
06:09.400 --> 06:14.220
So you'll have to use the on mouse out and on mouse over events

77
06:14.410 --> 06:20.830
and also the style attribute to change the background color to black or to white.

78
06:21.400 --> 06:27.430
But in addition, you'll have to think about how you're going to manage state and also how to conditionally

79
06:27.760 --> 06:30.640
render a different background color.

80
06:30.700 --> 06:33.750
So there's a lot of things in there but I'm sure you can do it.

81
06:33.790 --> 06:35.830
Pause the video and try to give it a go.

82
06:36.010 --> 06:42.250
And once you're done, come back and we'll walk through it together.

83
06:42.320 --> 06:42.620
All right.

84
06:42.650 --> 06:45.030
So here's the solution to the challenge.

85
06:45.050 --> 06:51.690
So the first thing to do is to apply the onmouseover event to our button.

86
06:51.740 --> 06:55.600
So that's going to go in just as onClick was added,

87
06:55.640 --> 06:57.710
so it's going to be a attribute.

88
06:57.920 --> 07:05.640
And remember because we are in JSX, these names are all camel cased. So onmouseover and we're going

89
07:05.640 --> 07:09.170
to make it trigger a function. And that function

90
07:09.200 --> 07:14.630
I'm going to create just below my handle click and you can call in anything but I'm going to call it

91
07:14.720 --> 07:24.510
handleMouseOver. And that is what will trigger when the user hovers their mouse over this button. And

92
07:24.510 --> 07:27.150
to check and make sure that actually works,

93
07:27.150 --> 07:30.780
let's go ahead and log moused over.

94
07:30.780 --> 07:38.400
And now as soon as you see my cursor move into the boundary of the button, then we get the log 'Moused

95
07:38.430 --> 07:43.220
over'. And this happens every single time my mouse goes from out to in.

96
07:43.380 --> 07:43.650
All right.

97
07:43.680 --> 07:50.730
So we've now confirmed that our mouse over event is being handled correctly and we're able to trigger this

98
07:50.730 --> 07:52.980
function when that happens.

99
07:52.980 --> 08:00.750
The next thing we want to do is to create some sort of variable that can hold state namely the state

100
08:00.900 --> 08:05.430
of whether if we should change the background color.

101
08:05.430 --> 08:12.300
So I'm going to create a new constant and I'm going to call that state isMousedOver.

102
08:15.470 --> 08:23.710
And I'm also going to add a function to be able to set it. So setMouseOver. And then I'm gonna make it

103
08:23.740 --> 08:29.400
equal to useState and the starting value is going to be false.

104
08:29.410 --> 08:35.020
So normally when the website loads up your mouse is not gonna be inside the button right?

105
08:35.230 --> 08:43.450
But when our mouse over is triggered calling this method handleMouseOver, then and only then are we going

106
08:43.450 --> 08:46.600
to set our mouse over.

107
08:46.660 --> 08:53.090
So call the method that we created here and then we're going to set it to true.

108
08:53.320 --> 09:02.080
Now we're able to use this isMousedOver to see what colour we should render the background of the button.

109
09:02.080 --> 09:11.020
So that means if the isMousedOver property is equal to true, then we're going to set the background

110
09:11.020 --> 09:17.170
color to black but if it's not true i.e. else then we're going to set it to white.

111
09:17.170 --> 09:22.110
So now if you go ahead and refresh this, you'll see that it starts out being white

112
09:22.120 --> 09:27.210
but as soon as my mouse goes in and hovers over the button, it changes the black.

113
09:27.400 --> 09:33.940
But unfortunately we have no way of changing it back at the moment because we haven't yet implemented

114
09:34.210 --> 09:36.730
the on mouse out event.

115
09:36.760 --> 09:38.330
So let's go ahead and do that.

116
09:38.410 --> 09:44.200
And remember if you got stuck previously and you couldn't get the on mouse over to work, now that you've

117
09:44.200 --> 09:45.510
seen how it's done

118
09:45.610 --> 09:53.690
go ahead and see if you can go back and add the on mouse out event. The on mouse out event is added the

119
09:53.690 --> 09:55.800
same way as on mouse over.

120
09:55.940 --> 10:03.740
So we'll just have to make sure we spell it right, onMouseOut, and we're going to get it to trigger another

121
10:03.740 --> 10:05.240
function.

122
10:05.240 --> 10:14.560
And this one I'm going to call handleMouseOut and inside this function, I'm going to set isMousedOver

123
10:14.560 --> 10:16.210
property back to false.

124
10:16.480 --> 10:23.950
So I'm going to call setMouseOver and set it to false. And then I'm going to make sure I call this

125
10:23.950 --> 10:26.620
function when onMouseOut is triggered.

126
10:27.190 --> 10:33.790
So now when I hover of the button, it turns black. When my mouse leaves it it turns white again. And we're

127
10:33.790 --> 10:40.270
able to do this because of all the knowledge that we've built up including conditional rendering using

128
10:40.270 --> 10:48.520
the ternary operator here, setting inline styles in our component, using event listeners such as on mouse

129
10:48.520 --> 10:57.900
over on mouse out, as well as setting and using state. Now in the next lesson, we're going to be looking

130
10:57.900 --> 11:05.520
more at how to use forms in React. And how to be able to receive and handle the events that arise from

131
11:05.580 --> 11:07.840
these inputs in a form.

132
11:07.860 --> 11:10.140
So for all of that and more, I'll see you there.