After a lot of work we finally got all this event handler stuff fixed up.
So now at this point in time we've got our term our search room right here.
Now we know that if a user enters in some amount of text and hits enter We want to initiate a PI request
and intend to go find some images that are matching whatever we enter here.
Be it like cars or plants or trees or flowers or whatever it is.
The first thing we need to think about here is where we are going to write some code to actually do
that API request.
Remember we haven't even spoken about the service we're going to use to fetch any images yet.
We'll get to that in just a second.
But before we do we need to think about where we are going to actually initiate the attempt to get some
images.
Well when I look at the search bar component I really start to realize that the only purpose of the
search bar is to allow a user to type in some input and then submitted by hitting enter.
It's not really the search bars job to take this term and then use it to make an API request or to find
some images.
Instead I would say that that would really be the job or the purpose of the app component instead.
So I think that rather than having the search bar doing any API requests or anything like that I think
that we need to somehow take the search term and pass it back up to the app component and then the app
component can be the one in charge of actually making an API request and somehow getting a list of images.
So in this section we're going to figure out how we can somehow get that search term from our search
bar back up to the app component.
Now this is going to be definitely a new thing for us to learn.
At this point we've only learned how to communicate between components through the prop system and remember
the prop system only allows us to pass information from the parent component down to a child.
So we say props go down this hierarchy.
We can only pass information from the app component down to search bar through.
But we can use a little trick.
So here's what we're going to do.
We're going to this is the same diagram I just reorganized it a little bit.
We're going to turn the app component into a class based component and then in it we're going to define
a callback method called on search submit.
Then whenever the app component decides to show our search bar it's going to pass that callback or that
on search submit as a callback method or as a prop down to the search bar and the search bar is going
to hold onto that method then any time that the user submits our form.
It's like when these are Smit's the form it's going to take that callback.
It was given and it's going to call that callback with whatever the search term was.
And so it's going to invoke the callback inside the app component with whatever search term the user
just entered.
Essentially this entire system that I'm describing right here is very similar if not identical to the
on forms submit and the On Change event handlers that we've already put together for the form and the
input we are passing a callback function down into these other components.
And then whenever something happens inside those components they are going to call our callback functions
to give our search bar a little notice that hey something just happened and you need to deal with the
CVN event that just occurred.
So in truth this might seem like a new thing but we've kind of technically already done it twice already.
All right.
So in order to do this the first thing we have to do is refactor our app into a class based component
so that it can have some function that can take and pass down into the search bar.
So to take a quick pause right here.
When we come back the next section will start refactoring our.