In the last section we put together some code to make a request to the YouTube API.
We're now ready to make use of that inside of our apps.
Yes file.
Remember any time that someone hits enter or submits our search form we want to reach out to YouTube
and try to find some results from their API.
So the first thing we have to do is add a callback method to our class app that will be called any time
that someone submits the search bar form.
So inside of my class up I'll say about on search or say on term submits and I'll make sure I defined
this as an arrow function like so and I'm going to assume that the thing is going to be called with
some term search string.
Now the reason I'm calling this on term Samit is that inside of our search bar remember we had called
the state inside of your term term being short for search term.
So I think that kind of makes sense just to carry that terminology through our application.
So then on my search bar can phone right here I'm going to add this callback as a prop will say how
about like on form submit.
I want to call this start on term submit
remember.
And we add a prop or kind of a callback name to a component that you and I create we can use any prop
name that you and I want to use.
So we could have each just as easily called out on forms submit could have been Call me when it submitted
know anything we want it to be.
But I think that on unformed Smit makes a pretty good amount of sense.
Does he know if I was making this application for myself I probably would have matched this to the name
of the actual callback.
So I probably would have called it something like On term Samit and made the two identical.
The only reason I'm specifically showing a different product name right here is just so you recall that
this and this do not have to be identical.
That's the only reason I'm not making the same otherwise if this was my own project that was making
for my own purpose.
I would probably give them the same exact name.
All right.
So now back inside of my search bar I'm going to find my on for summit number.
We've got to do right here.
We want to make sure that we call that prop any time that these are Smyth's the form.
So inside of your all say this stock props start on form submit
and I'm going to call that with this state term so that our parent component is told what the current
search term is.
So now whenever we submit the form this function right or should be cold with the appropriate search
term Just make sure that's the case on that.
On a quick console log in console log out the term.
All right so let's flip back over.
I'll enter in some search term hit enter and I see the appropriate counsel lock.
Perfect.
So I think that we're now ready to go ahead and remove that console log import the YouTube API and use
that to actually make a request to YouTube.
So at the top I'm going to add a import statement for simply YouTube and I'll import that from up one
directory so notice the two dots right there.
That means go up into the Cercy folder then go into the API folder and find the file.
YouTube.
So then inside of your I can call the U2 function.
Remember this is now a preconfigured instance of ASIO's.
So I'll say YouTube does get a pass in the route or the path that I want to make a get request to.
In this case I want to access the search and point and then now that we know what the search term is
we can pass in the actual Paramo of Q to tell the YouTube API exactly what search term we want to use.
So as the second argument all out in a parampara object that's going to have a property called Q.
Remember this kid right here is called Q Specifically because that is what that YouTube API documentation
told us to call it simply.
Q Not Kohary 90 like that just Q by itself.
And then our search string will be term like so which is the argument that had been passed into the
on terms Samit function.
Now this right here is a asynchronous API request.
So in order to interact with it we have to use a promise or that async a wait syntax that we saw a little
bit ago but before we worry about that too much let's just try to make a request with what you see right
here and just ensure that we actually see our request come up in the network request log and that we
can actually reach out to YouTube successfully.
So I going to save this file and my search for a file and then I'll flip back over to my application.
I'm going to open up my network request log.
Network not elements and then I'm going to filter by a char and fetch requests.
And then just make this a little bit easier to read.
All click on clear to throw out that requests log.
So now we can go ahead and do a search.
Let's go ahead and do buildings.
When I hit enter.
You'll notice that a request right here pops up.
I can hover over it and I'll see the entire query string on there.
So you see I can't quite move my mouse to show you exactly but you can see at the end of that Eurail
on the first line it says v3 search and then has the little question mark that indicates that we're
about to add on a query string.
So you can see part snippet Max results Phife our API key and then q equals buildings.
So all those different query parameters got added onto the request.
So now we can click on this go to the preview tab right here and it will show you the response we got
from YouTube.
All right.
So inside of here is a item's property.
There are five items zero through four.
And if you click on any of those items and then expand this snippet property you'll see that it has
some information about a very particular YouTube video.
So in this case this video has a title of 17 best building demolitions ever.
Boy that sounds like a amazing video.
I'm going to watch that after this.
And we've got some thumbnails on here that contains some links to images that we can show on the screen.
Now we've also got a video I.D. as well.
You'll notice back up here outside the snippet.
Is this I.D. property inside of it is a video I.D. this video I.D. is how we're going to eventually
get the video to play inside of our application.
So that's going to eventually be pretty relevant for what we're trying to do.
All right so that's it.
We've now successfully made a request to the YouTube API.
So let's take a pause here.
When we come back the next section we're going to start to focus on taking that list of videos and rendering
them as a list inside of our application.