1
00:00:00,810 --> 00:00:05,970
Now that we are able to fetch a list of videos from the YouTube API inside of our own terms submit function

2
00:00:05,970 --> 00:00:07,140
call back right here.

3
00:00:07,140 --> 00:00:11,640
We're going to make sure that we take the list of videos that are received and then set them EST on

4
00:00:11,640 --> 00:00:13,010
our app component.

5
00:00:13,170 --> 00:00:18,450
That's going to allow our app component to update itself or render itself which is then going to allow

6
00:00:18,450 --> 00:00:22,850
us to render those newly fetched videos out as a list onto the screen.

7
00:00:23,760 --> 00:00:28,440
So the first thing you have to do is make sure that we can actually go ahead and get a reference to

8
00:00:28,440 --> 00:00:30,190
the list of videos to get returned to.

9
00:00:30,450 --> 00:00:34,130
Remember make an API request as a asynchronous operation.

10
00:00:34,200 --> 00:00:38,910
Anytime that we make an asynchronous operation we have to interact with it using either promises or

11
00:00:38,910 --> 00:00:41,070
the async away syntax.

12
00:00:41,370 --> 00:00:45,750
In this case we're going to use the asynchronous syntax because it's significantly easier to write out

13
00:00:45,770 --> 00:00:47,390
and understand what is going on.

14
00:00:48,330 --> 00:00:52,710
So we're going to first make sure that we annotate this error this erro function right here as being

15
00:00:52,710 --> 00:00:54,760
an async function.

16
00:00:54,780 --> 00:01:02,360
So right in front of the term argument I'll say async like so and then I'll put the Awake keyword in

17
00:01:02,360 --> 00:01:09,710
front of my API request and then in front of that I'm going to assign the response to a variable that

18
00:01:09,740 --> 00:01:11,440
I will call response like so.

19
00:01:13,400 --> 00:01:18,970
And just as a quick reminder on what that response object is let's consulate it out very quickly because

20
00:01:18,970 --> 00:01:28,090
this is a very easy step to forget all now save this file and flip back over.

21
00:01:28,100 --> 00:01:33,590
Now if I open up my console down here and enter in some search I'll see that console log right here.

22
00:01:33,890 --> 00:01:36,260
So this is the entire response object.

23
00:01:36,290 --> 00:01:41,540
Remember the whole response object has a ton of different information about the request that was just

24
00:01:41,540 --> 00:01:44,890
made at the only property that you and I really care about.

25
00:01:44,960 --> 00:01:47,180
Is this a data property right here.

26
00:01:47,180 --> 00:01:52,340
The deed property is what actually contains the information that came back in the request.

27
00:01:52,330 --> 00:01:57,380
Furthermore inside the data property you and I don't really care about whatever this e-tag thing is

28
00:01:57,590 --> 00:01:59,800
or what the kind is or any of that stuff.

29
00:01:59,810 --> 00:02:04,730
The only thing that you and I really care about is the items property that is the array of videos that

30
00:02:04,730 --> 00:02:07,110
we want to eventually show on the screen.

31
00:02:07,130 --> 00:02:15,370
So for you and me our list of videos is contained inside of response data items.

32
00:02:15,440 --> 00:02:19,870
That's the list of videos that you and I actually care about.

33
00:02:19,930 --> 00:02:25,360
So we're going to take that list of videos and set them as states on our app component.

34
00:02:27,110 --> 00:02:31,550
Let's first make sure that we initialize our state inside the component so at the very top I'll say

35
00:02:31,550 --> 00:02:39,860
States equals I'm going to get this a property called videos and I'm going to default that to be an

36
00:02:39,890 --> 00:02:41,310
empty array.

37
00:02:41,780 --> 00:02:47,390
So now anytime that our component is first created it's going to have a state that videos property that

38
00:02:47,390 --> 00:02:52,850
starts off empty and then after a user eventually searches for something and we get back this list of

39
00:02:52,850 --> 00:02:58,550
videos then we'll go ahead and take that list of videos and we'll set them on our state.

40
00:02:58,550 --> 00:03:00,810
So down here I'm going to say this.

41
00:03:00,930 --> 00:03:03,270
Let's do it on a different line so it doesn't look too crazy.

42
00:03:03,260 --> 00:03:10,470
I'll say this Scott set States videos is going to be that list of videos that we just got back inside

43
00:03:10,500 --> 00:03:16,480
of our response.

44
00:03:16,500 --> 00:03:18,480
OK so it looks pretty good.

45
00:03:18,570 --> 00:03:23,490
Now is one more quick test just make sure that we're doing everything correctly here underneath my search

46
00:03:23,490 --> 00:03:24,030
bar.

47
00:03:25,490 --> 00:03:33,280
I'm going to out in a little text that says I have curly braces and I'll say this state videos.

48
00:03:33,340 --> 00:03:35,640
Length videos.

49
00:03:35,920 --> 00:03:41,050
So we should see this thing start off at the value of zero because we initially start with zero videos

50
00:03:41,560 --> 00:03:47,590
and then after we submit some request over to YouTube and get a response back and update our state we

51
00:03:47,590 --> 00:03:50,740
should see that be updated to five instead.

52
00:03:51,190 --> 00:03:56,620
This right here is a good reminder of why we usually default our state to be an empty array if we expect

53
00:03:56,620 --> 00:03:58,510
it to be an array in the future.

54
00:03:58,510 --> 00:04:01,360
Remember if we instead default to that to be the value no.

55
00:04:01,390 --> 00:04:05,110
Like so than when we tried doing this not state video videos at length.

56
00:04:05,110 --> 00:04:09,880
We would end up with an air that says cannot access property length of no.

57
00:04:10,270 --> 00:04:16,180
So by defaulting videos to be an array instead we can write a ton of code that just assumes this is

58
00:04:16,240 --> 00:04:19,370
always going to be an array and nothing else.

59
00:04:19,880 --> 00:04:20,130
OK.

60
00:04:20,140 --> 00:04:21,860
So I think this looks pretty good.

61
00:04:21,880 --> 00:04:24,590
I'm gonna save it and we'll do one quick test here.

62
00:04:24,820 --> 00:04:26,290
All right so I've got zero videos.

63
00:04:26,290 --> 00:04:26,970
Perfect.

64
00:04:27,010 --> 00:04:31,430
And if I do a search for buildings I see that it gets updated to five videos.

65
00:04:31,450 --> 00:04:32,960
Awesome.

66
00:04:32,960 --> 00:04:33,240
All right.

67
00:04:33,250 --> 00:04:34,990
So let's take another pause right here.

68
00:04:35,030 --> 00:04:40,220
When we come back in the next section we're going to start to focus on taking that list of videos and

69
00:04:40,220 --> 00:04:41,790
rendering them out as a list.

70
00:04:41,930 --> 00:04:43,980
So quick pause and I'll see you in just a minute.