In the last section we ran into the same issue that we ran into previously on this application.
So we need to fix the context or the value of this side of the on search submit callback by binding
it by assigning it as a arrow function to the search Samit property right here inside the app class
or by wrapping the callback down here inside of an arrow function.
Now before I do one of those I'm going to remove this little silly prop I added in there like so and
I'm going to put this back on a single line area and then one last thing I'll do is I'll remove the
console log of this because after we fix this issue we're not going to need to know what the value of
this is inside there.
Well no it's just fine.
OK.
So to fix the context of this inside this function we're going to do the same thing that we did back
inside of the search bar.
We're going to turn that function into an arrow function and then assign it to whatever our function
or a method name is.
Now this time around it's going to be just slightly more different because we have to include the async
keyword in here.
I mean first begin by removing the async cured just because it's going to be a little bit easier to
do this refactor without it in it's way.
And then I'm going to turn this thing into an arrow function just as we did previously.
So I will say on search submit equals the argument term and then I'll put my arrow right after it.
And now to get the async keyword back in here.
Because if we don't include the async keyword this a weight is going to throw an error right there.
I'm going to find right before that argument list and I'll put in the async keyword like so.
So that right there is how we define a zero function market as a sink and assign it to a instance property.
All right so now we build a save this all flip back over refresh already kicked in so I could put my
search term right in here.
I'll say cars and you'll see fountain images.
Perfect.
OK so that's pretty much it.
That is data fetching inside of a re-act application.
Now what we have here definitely works.
But there is a little bit of code cleanup that we can do around the X-Post code that you see right here.
So we're going to take a quick pause right now.
When we come back the next section we're going to clean up this Actio stuff just a little bit to avoid
our app component from having so much configuration related stuff inside of it.
So quick pause and I'll see you in just a minute.