In this section now that we've got our list of images we're going to start to discuss how we're going
to create this image list component and then render out a list of images that are going to show up for
our users.
All right.
So to get started I'll flip back over to my editor.
I'm going to find the components directory will be blowed up so you can see it very easily.
And inside the components directory I'm going to make a new file called the image list that G-S file.
And then inside of your we'll put together just a little bit of markup for a functional component of
first.
My sidebar right here and I'll say import re-act from re-act and I'll define Konst image list.
I will return a simple div that says image list for right now and I'll do a export default of image
list at the bottom like so.
Next up we're going to wind this thing up to the output file.
So I will change back over to the outdoor component or AB component at the top.
I'm going to import the image list component that we just created from the image list file.
And then I'm going to show this component inside of the apps render method.
So no longer do we need to display the found blah blah blah images.
I'm going to delete that entirely and replace it with the image list like so I'll save the file and
will do a quick check inside the browser and it says hey Michalis.
OK good enough.
All right so the next thing we need to do is somehow communicate our list of images that we just fetched
down to the image list.
We're going to do that communication from a parent down to a child component using the same prop system
we've used many times before.
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
images that we have inside of our state object.
So I'm going to say this does state images like the
next step will flip on over to the image list file.
Remember that Propp of images is going to show up inside the prop's object.
So I could refer to as props and we could reference it inside if you're a console log and say something
like Propst not images.
Let's just do a quick test with this just makes make it on the right track.
So when my application first renderers You'll notice I get the empty array because we don't have any
images yet.
If I do cars.
Yep there's my 10 images like so.
OK let's take a quick pause right here.
When we come back the next section we're going to figure out how we can take that list of images and
turn it into the actual list of GSX elements and show them to the user.