In the last section we put together a consummate handler on our form element.
So we define the prop we pass to a callback function and then we saw several times that the called EQ
function was successfully being called.
We note that it was being called successfully because when we tried to submit the form we saw that after
we added events pre-event default the browser no longer automatically refresh itself.
So at some point in time on form Smit was working just perfectly.
But then as soon as we added console log this odd status term we started to see an error message appear.
So in this video I want to start to figure out exactly why we are seeing this error message.
I'm going to tell you right now that this error message and the reason for it is going to be the absolute
most common error message that you see in every re-act project you're ever going to work on.
Without a doubt you're going to see this error message all the darn time.
So I want to make sure that you really understand why we are seeing this error message and exactly how
we are fixing it.
Let's first examine the message itself and get a better idea of the root cause of this issue.
So the message here says cannot read property state of undefined.
This is not a super clear message.
I'll be honest if I were in charge of writing error messages myself I would probably rephrase this as
something like I cannot access the property state on the value undefined.
Now even that's maybe not the best.
So let me give you a quick code example inside my javascript counsel over here on the right hand side.
As a quick reminder undefined is a value is a value inside of javascript.
If you ever tried to access a property on undefined such as undefined States you're going to get the
same error message that we just saw back over here.
Cannot read propertys state of undefined so this error message right here is essentially telling us
is we are trying to reference undefined state.
But as you can see with our code over here it says this not state not undefined.
So the root issue here is that javascript for some crazy reason thinks that inside of this on form Smet
function this is not equal to our instance of the search for a class.
It thinks that this is equal to the value undefined.
That's the root issue here.
So to really solve this problem and really understand the error message here's two things we have to
go through first.
We're going to first get a quick review of what this keyword is used for inside of a class and then
after that we're going to get a quick review on how the value of this is determined inside of a function.
Case number 1.
What is the value this used for in a class.
Here is a diagram of our instance of the search bar that is created anytime we render a search bar to
the screen.
The search bar instance has a couple different properties such as state render on forms submit inside
of any code that we write inside of the search bar.
We can reference the keyword.
This this is a reference back to the class itself.
So when we say this for essentially saying give me a reference to the instance of search part that I
am writing code inside of we can then use that to get direct access to our state render or on form submit
properties.
So for example I could say this state and it will give me access to the state object that belongs to
this particular instance of the search bar and we've already done that several times inside of our render
method.
Here is this not states.
Turn right here is this thought forms submit.
So without a doubt.
In some cases using this works just fine.
It seems like the one exception is here inside of the on forms that function.
So I do understand why it's going wrong right here.
We have to get a better idea of how the value of this is determined in a function to do so.
I want to give you a very quick code example that's basic going to exactly mirror this scenario that
we are in right now.
All right something to pull open a quick little code editor that we can very quickly write some code
into.
I'll put a link to it on the screen in case you want to write some code along with me.
So here is a link to it.
The address is my full name Stephen Grider.
Notice how I don't have an end to my last name.
Get help.
Io not com at so slash playgrounds.
All right.
So here is that Ed..
Now inside of here we can very quickly put some code on the left hand side like let's say Konst my value
equals 10 and then every time that you put a javascript expression underneath that that results in some
value it will be printed automatically on the right hand side.
So if I do my value I see 10 is printed.
Then I can do my value divide by 10.
I get one my value times 99.
I get 9 9 9 0 and if I go and change the original value appear it's going to update all those expressions
as well.
So this is just a little tool that we can use to very easily see values printed out for any given expression.
OK so now let's get a good example of how the value of this works inside of a class and how it gets
determined inside of a method.
I'm going to create a little dummy class here called car and inside of it I'm going to add two different
methods.
I'll say set.
Drive.
Sound that's going to be a function that gets an argument called Sound and I'm going to assign it to
this not sound like so and then after that I'll define a second method called Drive.
And any time we call that I'm going to return this sound.
So essentially it's just a dummy little class gives us the ability to set a value and then later on
return that value.
Essentially that's what's going on.
Forgetting all the car and drive sound terminology.
So after that I'm going to create a car with new car and then going to set the drive sound with vroom.
So now anytime that I called Drive I'm going to see froom print up over here.
All right.
So we now have a good example that makes use of the this keyword inside of a method on a class.
Let me now tell you the very important rule to understand when ever you want to figure out what the
value of this is going to be equal to inside of a method on a class.
We look not at the method itself.
We don't look at this method.
We look at where we call the method.
So we look down here recalling drive right here.
Now here's the rule of thumb we find the function name it is drive.
We look to the dot to the left of the function and then we look at the variable that is reference to
the left hand side.
This right here this is what this is going to be equal to inside the drive function.
So this right here does not sound like this that this is going to be equal to the car variable or the
instance of the car class.
That is a rule that is going to Styne stand up like 95 percent of the time in javascript.
Anytime you want to figure out what the value of this is going to be inside of a function you don't
look at the function you look at where the function is called and you look at what is to the left of
the dot when the function gets called.
In this case it's car.
So when the drive gets cold this is equal to our instance of the car.
Now I can give you a very good example of this in action.
Let me put together another little example here just to make sure that you understand that this is 100
percent true.
I'm going to create a object down here a simple object called Truck.
I'm going to give this thing a sound property of putt putt putt and I'm going to rip off the drive function
from my class car or from my instance of car right here I'm going to repeat the function out there and
assign it to this truck object.
So I say drive RCO let's be really explicit here I'm going to say drive my truck and I'm going to assign
that value from car not drive and now underneath that I'll do truck drive my truck.
So I'm not going to call it just yet.
I want you to tell me what do you think the value will be printed out here.
When I invoke this function What's the rule.
Well look at this function.
We look at what is still after the dot.
This is what this are right here.
I know using the word this too much here is really confusing but I know just look at what we have left
to the dot.
That variable right there is what this is going to be equal to inside the drive function.
So when I put the parentheses we see putt putt putt.
So it essentially is same as putting truck sound right there as opposed to this.
We just take that variable shove it in for the value of this and that's it.
That's the rule.
OK.
So now that we understand the rule let's really apply it to what is going on inside of our case with
the search bar and the form and the on Submit or enforcement call back right here.
OK.
I want to show you a little corner case here with this example.
Here's a corner case what happens if I assign the drive function to a variable called Drive like so
notice that I did not invoke drive there's no parentheses there I said card drive and I'm going to assign
that function to a function or to a variable called Drive.
Now down here I'm going to call the drive function but before I do before I put the parentheses on there
I want you to guess what is going to be returned.
Well applying that same rule that we just discussed to this function right here what is till after the
dot.
In this case there is no dot there's no time and there's nothing left to it.
You might even say that to the left of the dot that doesn't exist here is the undefined or it's undefined
to the left of the dot.
In this case.
So when I call this drive function now what do I get I get.
Truck.
OK.
Let's reverse the code back to was before I get cannot read property.
Sound of undefined.
A quick question for you.
Does that error message look familiar.
Does it look familiar at all.
I would say it looks pretty darn familiar.
Yeah that looks very familiar.
So what what does this tell you here.
It tells you that when we pass that call back down into the form element at some point in time we are
going to call our callback of on form submit right here and when it actually gets invoked there is no
like this dot on forms submit there's no search bar on foreign submit.
At some point in time when the form actually calls that function it rips that function off of that object
or whatever object it shows up by us inside that form element and it calls that function on its own
just like this.
And so when the function is invoked the value of this inside event is equal to undefined.
This example you see right here is exactly what is happening inside of our component right now.
All right.
Now at this point if this is confusing I encourage you to either rewash this video or ask a question
and the keyway because like I said this error message right here you're going to see it a billion times
even when I write real code these days.
I've been writing code for a very long time and I still run into this problem surprisingly frequently.
So if you have any questions right now please ask him cause he gotta understand this thing because I
guarantee you you will run into this error message.
OK.
So let's take a pause here.
When we come back the next section we're going to take this understanding about what's going on here
and really truly apply it to our form Elman right here and kind of close the entire circle and make
sure that things are really clear.
OK.
So quick pause and I'll see you in just a minute.