1
00:00:01,170 --> 00:00:04,830
In this section now that we've got our list of images we're going to start to discuss how we're going

2
00:00:04,830 --> 00:00:09,840
to create this image list component and then render out a list of images that are going to show up for

3
00:00:09,840 --> 00:00:11,400
our users.

4
00:00:11,400 --> 00:00:11,720
All right.

5
00:00:11,730 --> 00:00:14,640
So to get started I'll flip back over to my editor.

6
00:00:14,640 --> 00:00:18,750
I'm going to find the components directory will be blowed up so you can see it very easily.

7
00:00:18,750 --> 00:00:27,720
And inside the components directory I'm going to make a new file called the image list that G-S file.

8
00:00:27,720 --> 00:00:33,690
And then inside of your we'll put together just a little bit of markup for a functional component of

9
00:00:33,820 --> 00:00:34,430
first.

10
00:00:34,440 --> 00:00:46,320
My sidebar right here and I'll say import re-act from re-act and I'll define Konst image list.

11
00:00:46,390 --> 00:00:54,840
I will return a simple div that says image list for right now and I'll do a export default of image

12
00:00:54,900 --> 00:00:56,450
list at the bottom like so.

13
00:00:58,800 --> 00:01:01,600
Next up we're going to wind this thing up to the output file.

14
00:01:01,830 --> 00:01:06,690
So I will change back over to the outdoor component or AB component at the top.

15
00:01:06,690 --> 00:01:12,940
I'm going to import the image list component that we just created from the image list file.

16
00:01:14,290 --> 00:01:18,540
And then I'm going to show this component inside of the apps render method.

17
00:01:18,760 --> 00:01:22,200
So no longer do we need to display the found blah blah blah images.

18
00:01:22,210 --> 00:01:27,840
I'm going to delete that entirely and replace it with the image list like so I'll save the file and

19
00:01:27,840 --> 00:01:31,200
will do a quick check inside the browser and it says hey Michalis.

20
00:01:31,290 --> 00:01:32,700
OK good enough.

21
00:01:32,700 --> 00:01:36,870
All right so the next thing we need to do is somehow communicate our list of images that we just fetched

22
00:01:36,930 --> 00:01:38,700
down to the image list.

23
00:01:38,700 --> 00:01:43,860
We're going to do that communication from a parent down to a child component using the same prop system

24
00:01:43,890 --> 00:01:45,480
we've used many times before.

25
00:01:46,410 --> 00:01:52,470
So I'm going to define a new prop on the image list called images and to it I'm going to pass all the

26
00:01:52,470 --> 00:01:55,580
images that we have inside of our state object.

27
00:01:55,680 --> 00:02:00,340
So I'm going to say this does state images like the

28
00:02:03,670 --> 00:02:06,680
next step will flip on over to the image list file.

29
00:02:06,730 --> 00:02:10,870
Remember that Propp of images is going to show up inside the prop's object.

30
00:02:10,990 --> 00:02:16,060
So I could refer to as props and we could reference it inside if you're a console log and say something

31
00:02:16,060 --> 00:02:18,030
like Propst not images.

32
00:02:18,130 --> 00:02:21,930
Let's just do a quick test with this just makes make it on the right track.

33
00:02:21,940 --> 00:02:26,020
So when my application first renderers You'll notice I get the empty array because we don't have any

34
00:02:26,020 --> 00:02:27,100
images yet.

35
00:02:27,240 --> 00:02:28,150
If I do cars.

36
00:02:28,180 --> 00:02:30,300
Yep there's my 10 images like so.

37
00:02:30,680 --> 00:02:32,220
OK let's take a quick pause right here.

38
00:02:32,230 --> 00:02:35,980
When we come back the next section we're going to figure out how we can take that list of images and

39
00:02:35,980 --> 00:02:40,220
turn it into the actual list of GSX elements and show them to the user.