1
00:00:00,820 --> 00:00:04,190
In the last section we were able to fetch our own list of videos.

2
00:00:04,200 --> 00:00:06,890
Now it's time to render them out on the right hand side.

3
00:00:07,020 --> 00:00:09,420
We're going to create two separate components.

4
00:00:09,510 --> 00:00:11,200
One is going to be the video list.

5
00:00:11,220 --> 00:00:16,980
The other is going to be the video item the video list is going to take that array of video objects

6
00:00:16,980 --> 00:00:19,010
that we just fetch from the YouTube API.

7
00:00:19,140 --> 00:00:23,950
And then for each video object we're going to render a single video item.

8
00:00:23,940 --> 00:00:27,210
So remember not just this thing right here is going to be a video item.

9
00:00:27,210 --> 00:00:30,870
It's going to be that and that one and that one.

10
00:00:30,900 --> 00:00:37,040
All three are instances of the video item component now in this video we're going to start to create

11
00:00:37,070 --> 00:00:41,900
those two components and then wire the video list up to the app component.

12
00:00:41,990 --> 00:00:48,200
Remember the app component alone is going to show the video list an individualist in turn is going to

13
00:00:48,200 --> 00:00:52,070
render out all the different video item components.

14
00:00:52,070 --> 00:00:52,280
All right.

15
00:00:52,280 --> 00:00:53,230
So let's get to it.

16
00:00:53,540 --> 00:00:59,000
I'm going to flip back over to my code editor and inside of my components directory I want to make a

17
00:00:59,000 --> 00:01:01,550
new file called the video list.

18
00:01:01,800 --> 00:01:03,270
Yes.

19
00:01:03,470 --> 00:01:06,220
We're going to create a functional component inside of here.

20
00:01:06,260 --> 00:01:12,940
So I'll say import re-act from re-act I'll make a new function called video list.

21
00:01:14,850 --> 00:01:19,770
This is going to take some props object which we are not going to use just yet but we will use in just

22
00:01:19,770 --> 00:01:25,610
a minute and then right now I'll have it return a div with the text video list.

23
00:01:28,080 --> 00:01:36,100
And then at the bottom I'll put in my expert default video list.

24
00:01:36,100 --> 00:01:36,340
All right.

25
00:01:36,350 --> 00:01:37,230
So that's a good start.

26
00:01:37,240 --> 00:01:40,080
It's now wired up to the outcome jazz file.

27
00:01:40,330 --> 00:01:41,910
So I'm going to flip back over to Epcot.

28
00:01:41,930 --> 00:01:42,730
Yes.

29
00:01:42,790 --> 00:01:46,890
At the very top I will add an import statement for the video list.

30
00:01:50,510 --> 00:01:55,350
And then I will add this component down inside of my render method and I'm going to make sure that I

31
00:01:55,350 --> 00:01:59,730
clean up that I have blank video so we had just a moment ago.

32
00:01:59,770 --> 00:02:07,130
So right after the search bar I will place video list and whenever the app component shows the video

33
00:02:07,130 --> 00:02:12,650
list we have to give that video list the list of video objects that we have fetched so that the video

34
00:02:12,650 --> 00:02:15,260
list knows what to actually render on the screen.

35
00:02:15,650 --> 00:02:21,980
So we're going to pass a product down into the video list called videos and this is going to be a reference

36
00:02:21,980 --> 00:02:23,860
to the array that we fetch.

37
00:02:23,880 --> 00:02:27,610
Anytime that we call on turn submit.

38
00:02:27,660 --> 00:02:33,930
So the actual array of videos is going to be available at this state DOT videos.

39
00:02:34,080 --> 00:02:38,190
So I'm going to make sure that inside the video list I pass in a proper name videos.

40
00:02:38,190 --> 00:02:39,530
Notice how this is plural.

41
00:02:39,540 --> 00:02:43,640
There's an S on the end and I get it passed in this state.

42
00:02:43,680 --> 00:02:44,790
Videos like so

43
00:02:47,970 --> 00:02:50,290
now we can go back over to the video list.

44
00:02:50,580 --> 00:02:58,020
Now any time that this component is rendered onto the screen it will have a prop called prop's dot videos.

45
00:02:58,020 --> 00:03:03,810
This is going to be the array of different records that we want to render out as female to the screen.

46
00:03:04,930 --> 00:03:07,960
Right now just to make sure that these props are showing up appropriately.

47
00:03:08,020 --> 00:03:13,360
I'm going to remove the text video list and replace it with props videos.

48
00:03:14,550 --> 00:03:16,460
Length just as we had before.

49
00:03:18,340 --> 00:03:18,610
All right.

50
00:03:18,620 --> 00:03:21,430
So I gotta save this all flip back over to my browser.

51
00:03:22,630 --> 00:03:25,200
I see over here a very small little zero.

52
00:03:25,560 --> 00:03:31,350
And if I put in a search term and hit enter I see it go up to five which means that we are correctly

53
00:03:31,530 --> 00:03:35,750
getting our list of videos from the app component down into the video list.

54
00:03:36,180 --> 00:03:37,340
All right let's take a pause here.

55
00:03:37,350 --> 00:03:42,090
When we come back the next section we're going to start to also implement the video item component and

56
00:03:42,090 --> 00:03:45,900
make sure that the video list shows a list of video items.

57
00:03:46,140 --> 00:03:48,340
All right so quick pause and I'll see you in just a minute.