In the last section we spoke about how we're going to communicate information from the search bar to
the app.
So step one is to refactor our app into a class based component to open up my apps J.S. file and I'll
go through the same process that we've already learned for refactoring a functional component over to
a class 1.
So I'm going to find the app declaration right here and I will replace it with class app extends re-act
dot component.
Then inside there are defined by render function and I'll put a curly brace on the other side of it
like so.
Then finally I'll make sure that I remove the semi-colon on the very end of the class ok cell X good.
So now we can define a callback function on the app I think we'll give it the same name that you saw
over here.
We called it on search submit.
It's all defined in method on search submits.
Are going to say that this thing gets called with our search term which all abbreviates simply adds
term.
So right now let's just cancel that term and make sure that it shows up inside the app.
Now we can take this method and pass it down into the search bar as a prop.
So I'll say on submit Hassen on search submit.
Now notice the name that I use here I said on submit on our form element back inside of search bar here
is the search bar on the form element and the input right here.
We have to call these props are these things that function as callbacks on summits or onchange with
these normal GSX elements.
We have to use these very specific names.
But when you pass in properties or callbacks to components that you and I author we can call them anything
that we want.
So I decided on submit.
I could have just as easily called this something like Ron me when user submits or something like that
we can call it anything we want but in general I just kind of thought on Samit kind of makes sense.
I want to run this function and each time that the search bar is submitted.
So on Samit run this function.
To me it kind of makes sense but if you think that there is some other name here that would make more
sense.
Feel free to go for it.
Just remember you can't do that same thing when ever you are passing a prop in a callback to eight in
normal GSX element.
All right so now inside on form submit rather than cancel logging out our term we instead want to call
on search submit was which was passed in as a prop to this component.
Now remember any time we pass a prop down into a component that we are creating we refer to that prop
with this name.
So inside of this search bar to reference that prop we would say props start on submit.
That is the reference to the function.
They got passed in a peer.
Now just one little issue here every time that we have made use of props so far throughout this course
it's always been a functional component.
This is the first time that we are making use of props inside of a class based component.
One little difference between the two when we are in a class based component we reference the props
object with this props.
That's it.
That's the only difference.
So to get access to the callback that was passed from the app down to our search bar we would reference
this props on Samit then I'll make sure I call that and when I call it I'll pass in this state term
like so.
All right.
That's it.
I think we're now ready to test this as a quick reminder.
Just one quick run through here.
So we're now saying that whenever a user submits the form we are going to run on forms submit yours
on form submit we take the event.
We prevent the default behavior that would cause the page to refresh itself and then we look at our
Propp subject and we called a function that was passed into this thing as the on submit product and
we invoke that function with this state term here is that function we passed in on search submit to
the on Samit Propp.
So this is the function that ultimately is going to be invoked and for right now we're just going to
counsel luck.
All right.
So I'm going to flip back over I'll put in some text here and then hit enter.
And yet we see some term that right there.
You'll notice that it was counsel from the GSA file on line 6.
So here is line 6 right here inside of the abdicates file.
So that's pretty much it.
So now inside of here we can write some code to go ahead and take the search term and actually make
a request to get a list of images.
So let's take a quick pause right here.
When we come back the next section we're going to start talking about data loading inside of our application.