Now that we are able to fetch a list of videos from the YouTube API inside of our own terms submit function
call back right here.
We're going to make sure that we take the list of videos that are received and then set them EST on
our app component.
That's going to allow our app component to update itself or render itself which is then going to allow
us to render those newly fetched videos out as a list onto the screen.
So the first thing you have to do is make sure that we can actually go ahead and get a reference to
the list of videos to get returned to.
Remember make an API request as a asynchronous operation.
Anytime that we make an asynchronous operation we have to interact with it using either promises or
the async away syntax.
In this case we're going to use the asynchronous syntax because it's significantly easier to write out
and understand what is going on.
So we're going to first make sure that we annotate this error this erro function right here as being
an async function.
So right in front of the term argument I'll say async like so and then I'll put the Awake keyword in
front of my API request and then in front of that I'm going to assign the response to a variable that
I will call response like so.
And just as a quick reminder on what that response object is let's consulate it out very quickly because
this is a very easy step to forget all now save this file and flip back over.
Now if I open up my console down here and enter in some search I'll see that console log right here.
So this is the entire response object.
Remember the whole response object has a ton of different information about the request that was just
made at the only property that you and I really care about.
Is this a data property right here.
The deed property is what actually contains the information that came back in the request.
Furthermore inside the data property you and I don't really care about whatever this e-tag thing is
or what the kind is or any of that stuff.
The only thing that you and I really care about is the items property that is the array of videos that
we want to eventually show on the screen.
So for you and me our list of videos is contained inside of response data items.
That's the list of videos that you and I actually care about.
So we're going to take that list of videos and set them as states on our app component.
Let's first make sure that we initialize our state inside the component so at the very top I'll say
States equals I'm going to get this a property called videos and I'm going to default that to be an
empty array.
So now anytime that our component is first created it's going to have a state that videos property that
starts off empty and then after a user eventually searches for something and we get back this list of
videos then we'll go ahead and take that list of videos and we'll set them on our state.
So down here I'm going to say this.
Let's do it on a different line so it doesn't look too crazy.
I'll say this Scott set States videos is going to be that list of videos that we just got back inside
of our response.
OK so it looks pretty good.
Now is one more quick test just make sure that we're doing everything correctly here underneath my search
bar.
I'm going to out in a little text that says I have curly braces and I'll say this state videos.
Length videos.
So we should see this thing start off at the value of zero because we initially start with zero videos
and then after we submit some request over to YouTube and get a response back and update our state we
should see that be updated to five instead.
This right here is a good reminder of why we usually default our state to be an empty array if we expect
it to be an array in the future.
Remember if we instead default to that to be the value no.
Like so than when we tried doing this not state video videos at length.
We would end up with an air that says cannot access property length of no.
So by defaulting videos to be an array instead we can write a ton of code that just assumes this is
always going to be an array and nothing else.
OK.
So I think this looks pretty good.
I'm gonna save it and we'll do one quick test here.
All right so I've got zero videos.
Perfect.
And if I do a search for buildings I see that it gets updated to five videos.
Awesome.
All right.
So let's take another pause right here.
When we come back in the next section we're going to start to focus on taking that list of videos and
rendering them out as a list.
So quick pause and I'll see you in just a minute.