All right.
So I think we now really understand what is going wrong with this event handler.
So in this video we're going to start running on some code to fix this problem.
Now before we write any code I want you to understand there's probably like five six seven different
ways of fixing this problem.
There are many different ways to solve this.
So I'm going to show you a couple.
And these are going to be the different ways that you and I most frequently are going to solve the issue.
So the first way I want to write out the solution to this original example that we put together over
here very quickly to show you in very simple terms with very little code how quickly or how easily we
can solve the problem.
OK.
So first way number one to solve this we can define our constructor function inside of our class.
Now notice in this case my class car is not extending anything because it's not extending anything.
I don't have to call super not expected.
You'll see that I even get a error message here because I am not extending anything.
So no need for super.
In this case.
So one way I could solve this is by binding the drive function to do so I would say this.
Bind me this drive equals this drive.
Bind this like so now you'll see that the instant I do that I get the correct result from coaling drive
down here.
When we bind a function or call this drive bind it's going to produce a new version of that function.
So this right here makes a new function altogether this new function that is created is essentially
fixed with the correct value of this.
So this right here creates a new function that is going to have always the correct value of this or
the value of this equal to our instance of the car.
We then take that new function and overwrite the existing kind of broken not fix function that exists
on the dot drive property.
So this is one way right here to solve this problem.
Define the constructor by the function and then overwrite the existing one.
You're going to see a lot of more legacy code.
Solving this problem in this fashion.
This is a way of solving this problem that you see very highly recommended and you're going to know
you're going to see it very frequently.
If you do it this way that's totally fine.
Let me now show you the next way the next way we could solve this.
Unfortunately it cannot be written into this code editor because it relies upon a feature of Babel that
is not yet edited right and implemented into this editor yet sorry.
So we got to go back over here and solve it in a different way.
OK.
So back over here.
The second way we can solve it is to turn the function right here that we are assigning to on forms
submit into an arrow function instead.
So you know this right here what you see right here is essentially shorthand syntax for something like
that.
It defines a Enforcement property and then assigns it a function that declared with the function keyword.
And he said that use the function keyword.
That's always going to lead to a broken value of this as I'm sure you're aware we've got those nice
sweet aero functions with yes 2015.
One of the special features of aero functions is that they automatically bind the value of this for
all the code inside the function.
So we can replace this default implementation right here with this usual syntax we've been using so
far with a arrow function instead.
To do so I'm going to use a very similar syntax to what we did appear with state so say on foreign Samit
equals an arrow function like so.
So very similar to what we have up here.
The only difference is that this time around rather than assigning a object we are assigning an arrow
function to the arrow function is going to automatically make sure that the value of this is always
equal to our search bar or our instance of the search bar.
So let's now very quickly save this and try running this code.
So I'll flip back over to my browser and here is our search form will enter something inside of here
and then I'll hit enter.
And now we see our term property right there without the error that we saw before.
So that error function definitely solved the problem.
So like I said this is a second way in which you could solve this problem.
So now you can understand we either use the constructor or we can do the arrow function like so I'm
going to show you one other way.
I'm going to only show you this other way because we've actually kind of technically already used it
inside of this component.
All right I'm going to first reverse the change.
I just did right here.
Back to how it was before.
So very quickly to refresh and just make sure I still see that.
Yes.
OK so I'm back to how I was before.
All right.
Now here's the third way.
Now we've technically already used this on the input right here.
Notice how our input function it has a callback is very much like what we have right here.
But in this case the callback gets passed down into that component using an arrow function.
So rather than defining a method on our class using an arrow function we just pass a arrow function
directly into our prop's right here.
Or Backley directly into the onchange prop so we can do the same thing with on submit right here.
I'm going to wrap on form submit with an arrow function.
So I'll put in my parentheses right there.
I'll put in my arrow and now I'm going to make sure that I invoke on form submit.
So why am I putting on the Princes here.
Remember in this case I'm now defining an arrow function and passing it down into the form.
So when the form gets submitted it's going to call the arrow function.
So it's going to then execute essentially this little segment right here.
Everything from this start on foreign Smidt to the very end.
So it's only going to the form is only going to invoke this arrow function one time.
It's not going to invoke the arrow function and then get back on form submit function and then decide
to invoke that.
Now that's not how it works.
Whenever we use the arrow function here it's only going to call the arrow function one time.
So now we have to make sure that we invoke on form submit.
All right so now we'll try saying this and we'll do the same thing.
Put some text in.
Hit ENTER NOW.
Ok I made a typo here.
Where do I make my typo.
On form submit on forms submit.
I've got a typo.
Oh it's the event object.
My mistake sorry we have to take the event object and make sure that we pass it into on form submit
like so just as we did down here for the onchange.
OK so let's try this now.
I'll put in some text and enter.
And there we go.
All right so that's it.
That's three ways in which we can solve this.
Now in general we're going to go with the route of assigning an arrow function like so that's going
to be the default method that we use to fix this problem.
But in some cases when we decide to inline a callback as we did down here we'll just rely upon this
arrow function to solve the problem for us.
All right so now in this case if we're going to use the arrow function up here we don't have to put
in the Arrow function in the summit handler.
Technically we could but we don't have to do both.
So I'll say this.
On form submit.
And now I'm back to just passing in a reference to the function.
So I do not need to add in the parentheses OK so let's try one more time just to make sure everything
is fixed.
And yep we're looking to.
All right so that's it.
It's probably way more than you ever wanted to know about context and these event handlers.
Like I said you will run into this problem.
So let's take a pause here.
Continue in the next section.