1
00:00:01,170 --> 00:00:01,470
All right.

2
00:00:01,470 --> 00:00:05,020
So I think we now really understand what is going wrong with this event handler.

3
00:00:05,040 --> 00:00:08,170
So in this video we're going to start running on some code to fix this problem.

4
00:00:08,220 --> 00:00:13,290
Now before we write any code I want you to understand there's probably like five six seven different

5
00:00:13,290 --> 00:00:14,990
ways of fixing this problem.

6
00:00:15,000 --> 00:00:17,470
There are many different ways to solve this.

7
00:00:17,690 --> 00:00:19,350
So I'm going to show you a couple.

8
00:00:19,350 --> 00:00:24,310
And these are going to be the different ways that you and I most frequently are going to solve the issue.

9
00:00:24,750 --> 00:00:30,540
So the first way I want to write out the solution to this original example that we put together over

10
00:00:30,540 --> 00:00:36,060
here very quickly to show you in very simple terms with very little code how quickly or how easily we

11
00:00:36,060 --> 00:00:37,610
can solve the problem.

12
00:00:37,920 --> 00:00:38,180
OK.

13
00:00:38,190 --> 00:00:44,970
So first way number one to solve this we can define our constructor function inside of our class.

14
00:00:44,970 --> 00:00:50,220
Now notice in this case my class car is not extending anything because it's not extending anything.

15
00:00:50,220 --> 00:00:52,680
I don't have to call super not expected.

16
00:00:52,680 --> 00:00:56,800
You'll see that I even get a error message here because I am not extending anything.

17
00:00:56,850 --> 00:00:58,080
So no need for super.

18
00:00:58,080 --> 00:00:59,370
In this case.

19
00:00:59,750 --> 00:01:05,490
So one way I could solve this is by binding the drive function to do so I would say this.

20
00:01:05,520 --> 00:01:10,060
Bind me this drive equals this drive.

21
00:01:10,140 --> 00:01:16,440
Bind this like so now you'll see that the instant I do that I get the correct result from coaling drive

22
00:01:16,440 --> 00:01:17,340
down here.

23
00:01:17,760 --> 00:01:25,000
When we bind a function or call this drive bind it's going to produce a new version of that function.

24
00:01:25,140 --> 00:01:30,930
So this right here makes a new function altogether this new function that is created is essentially

25
00:01:30,990 --> 00:01:34,500
fixed with the correct value of this.

26
00:01:34,500 --> 00:01:39,470
So this right here creates a new function that is going to have always the correct value of this or

27
00:01:39,480 --> 00:01:42,720
the value of this equal to our instance of the car.

28
00:01:42,950 --> 00:01:49,820
We then take that new function and overwrite the existing kind of broken not fix function that exists

29
00:01:49,850 --> 00:01:52,080
on the dot drive property.

30
00:01:52,100 --> 00:01:54,490
So this is one way right here to solve this problem.

31
00:01:54,500 --> 00:01:59,240
Define the constructor by the function and then overwrite the existing one.

32
00:01:59,240 --> 00:02:02,270
You're going to see a lot of more legacy code.

33
00:02:02,270 --> 00:02:04,340
Solving this problem in this fashion.

34
00:02:04,340 --> 00:02:08,800
This is a way of solving this problem that you see very highly recommended and you're going to know

35
00:02:08,810 --> 00:02:10,340
you're going to see it very frequently.

36
00:02:10,430 --> 00:02:12,690
If you do it this way that's totally fine.

37
00:02:12,720 --> 00:02:15,020
Let me now show you the next way the next way we could solve this.

38
00:02:15,020 --> 00:02:20,240
Unfortunately it cannot be written into this code editor because it relies upon a feature of Babel that

39
00:02:20,240 --> 00:02:24,340
is not yet edited right and implemented into this editor yet sorry.

40
00:02:24,350 --> 00:02:27,410
So we got to go back over here and solve it in a different way.

41
00:02:27,840 --> 00:02:28,050
OK.

42
00:02:28,070 --> 00:02:28,770
So back over here.

43
00:02:28,790 --> 00:02:34,490
The second way we can solve it is to turn the function right here that we are assigning to on forms

44
00:02:34,490 --> 00:02:37,580
submit into an arrow function instead.

45
00:02:37,940 --> 00:02:43,430
So you know this right here what you see right here is essentially shorthand syntax for something like

46
00:02:43,430 --> 00:02:44,350
that.

47
00:02:44,540 --> 00:02:50,810
It defines a Enforcement property and then assigns it a function that declared with the function keyword.

48
00:02:50,940 --> 00:02:52,660
And he said that use the function keyword.

49
00:02:52,660 --> 00:02:59,260
That's always going to lead to a broken value of this as I'm sure you're aware we've got those nice

50
00:02:59,320 --> 00:03:02,230
sweet aero functions with yes 2015.

51
00:03:02,380 --> 00:03:07,690
One of the special features of aero functions is that they automatically bind the value of this for

52
00:03:07,690 --> 00:03:09,610
all the code inside the function.

53
00:03:10,120 --> 00:03:16,120
So we can replace this default implementation right here with this usual syntax we've been using so

54
00:03:16,120 --> 00:03:18,700
far with a arrow function instead.

55
00:03:19,700 --> 00:03:25,430
To do so I'm going to use a very similar syntax to what we did appear with state so say on foreign Samit

56
00:03:25,700 --> 00:03:28,860
equals an arrow function like so.

57
00:03:30,810 --> 00:03:32,220
So very similar to what we have up here.

58
00:03:32,220 --> 00:03:37,050
The only difference is that this time around rather than assigning a object we are assigning an arrow

59
00:03:37,050 --> 00:03:42,630
function to the arrow function is going to automatically make sure that the value of this is always

60
00:03:42,720 --> 00:03:47,490
equal to our search bar or our instance of the search bar.

61
00:03:47,490 --> 00:03:50,860
So let's now very quickly save this and try running this code.

62
00:03:51,030 --> 00:03:56,070
So I'll flip back over to my browser and here is our search form will enter something inside of here

63
00:03:56,130 --> 00:03:57,450
and then I'll hit enter.

64
00:03:57,510 --> 00:04:02,200
And now we see our term property right there without the error that we saw before.

65
00:04:02,250 --> 00:04:05,090
So that error function definitely solved the problem.

66
00:04:05,090 --> 00:04:08,530
So like I said this is a second way in which you could solve this problem.

67
00:04:08,580 --> 00:04:14,210
So now you can understand we either use the constructor or we can do the arrow function like so I'm

68
00:04:14,220 --> 00:04:16,060
going to show you one other way.

69
00:04:16,110 --> 00:04:19,830
I'm going to only show you this other way because we've actually kind of technically already used it

70
00:04:19,860 --> 00:04:21,530
inside of this component.

71
00:04:21,780 --> 00:04:23,630
All right I'm going to first reverse the change.

72
00:04:23,650 --> 00:04:24,720
I just did right here.

73
00:04:24,960 --> 00:04:26,390
Back to how it was before.

74
00:04:26,820 --> 00:04:29,560
So very quickly to refresh and just make sure I still see that.

75
00:04:29,760 --> 00:04:30,020
Yes.

76
00:04:30,060 --> 00:04:32,580
OK so I'm back to how I was before.

77
00:04:32,580 --> 00:04:32,840
All right.

78
00:04:32,840 --> 00:04:33,990
Now here's the third way.

79
00:04:34,910 --> 00:04:38,230
Now we've technically already used this on the input right here.

80
00:04:38,270 --> 00:04:43,730
Notice how our input function it has a callback is very much like what we have right here.

81
00:04:44,020 --> 00:04:49,670
But in this case the callback gets passed down into that component using an arrow function.

82
00:04:49,770 --> 00:04:55,310
So rather than defining a method on our class using an arrow function we just pass a arrow function

83
00:04:55,370 --> 00:04:58,540
directly into our prop's right here.

84
00:04:58,580 --> 00:05:04,020
Or Backley directly into the onchange prop so we can do the same thing with on submit right here.

85
00:05:04,100 --> 00:05:07,730
I'm going to wrap on form submit with an arrow function.

86
00:05:07,970 --> 00:05:09,550
So I'll put in my parentheses right there.

87
00:05:09,560 --> 00:05:15,590
I'll put in my arrow and now I'm going to make sure that I invoke on form submit.

88
00:05:15,590 --> 00:05:17,450
So why am I putting on the Princes here.

89
00:05:17,650 --> 00:05:22,600
Remember in this case I'm now defining an arrow function and passing it down into the form.

90
00:05:22,640 --> 00:05:26,800
So when the form gets submitted it's going to call the arrow function.

91
00:05:26,930 --> 00:05:32,860
So it's going to then execute essentially this little segment right here.

92
00:05:32,900 --> 00:05:35,950
Everything from this start on foreign Smidt to the very end.

93
00:05:36,410 --> 00:05:40,410
So it's only going to the form is only going to invoke this arrow function one time.

94
00:05:40,430 --> 00:05:45,230
It's not going to invoke the arrow function and then get back on form submit function and then decide

95
00:05:45,230 --> 00:05:45,980
to invoke that.

96
00:05:45,980 --> 00:05:47,140
Now that's not how it works.

97
00:05:47,150 --> 00:05:50,790
Whenever we use the arrow function here it's only going to call the arrow function one time.

98
00:05:50,790 --> 00:05:54,730
So now we have to make sure that we invoke on form submit.

99
00:05:54,760 --> 00:05:57,970
All right so now we'll try saying this and we'll do the same thing.

100
00:05:58,000 --> 00:05:58,720
Put some text in.

101
00:05:58,720 --> 00:06:00,620
Hit ENTER NOW.

102
00:06:01,850 --> 00:06:03,180
Ok I made a typo here.

103
00:06:03,350 --> 00:06:04,850
Where do I make my typo.

104
00:06:05,090 --> 00:06:08,560
On form submit on forms submit.

105
00:06:08,900 --> 00:06:09,780
I've got a typo.

106
00:06:09,800 --> 00:06:11,030
Oh it's the event object.

107
00:06:11,030 --> 00:06:15,520
My mistake sorry we have to take the event object and make sure that we pass it into on form submit

108
00:06:15,530 --> 00:06:18,970
like so just as we did down here for the onchange.

109
00:06:19,410 --> 00:06:20,960
OK so let's try this now.

110
00:06:20,990 --> 00:06:22,460
I'll put in some text and enter.

111
00:06:22,490 --> 00:06:24,340
And there we go.

112
00:06:24,380 --> 00:06:25,030
All right so that's it.

113
00:06:25,040 --> 00:06:27,080
That's three ways in which we can solve this.

114
00:06:27,170 --> 00:06:34,140
Now in general we're going to go with the route of assigning an arrow function like so that's going

115
00:06:34,140 --> 00:06:36,680
to be the default method that we use to fix this problem.

116
00:06:37,020 --> 00:06:42,220
But in some cases when we decide to inline a callback as we did down here we'll just rely upon this

117
00:06:42,240 --> 00:06:45,210
arrow function to solve the problem for us.

118
00:06:45,210 --> 00:06:49,410
All right so now in this case if we're going to use the arrow function up here we don't have to put

119
00:06:49,410 --> 00:06:51,450
in the Arrow function in the summit handler.

120
00:06:51,450 --> 00:06:53,690
Technically we could but we don't have to do both.

121
00:06:53,710 --> 00:06:54,440
So I'll say this.

122
00:06:54,480 --> 00:06:55,910
On form submit.

123
00:06:56,060 --> 00:06:58,650
And now I'm back to just passing in a reference to the function.

124
00:06:58,710 --> 00:07:04,510
So I do not need to add in the parentheses OK so let's try one more time just to make sure everything

125
00:07:04,510 --> 00:07:05,160
is fixed.

126
00:07:05,300 --> 00:07:06,950
And yep we're looking to.

127
00:07:07,270 --> 00:07:08,680
All right so that's it.

128
00:07:08,770 --> 00:07:13,180
It's probably way more than you ever wanted to know about context and these event handlers.

129
00:07:13,180 --> 00:07:16,150
Like I said you will run into this problem.

130
00:07:16,420 --> 00:07:17,400
So let's take a pause here.

131
00:07:17,410 --> 00:07:18,680
Continue in the next section.