In the last section we got a quick review of map statements in Javascript.
So we're now going to use that knowledge to return a list of images from our image list component to
do so I'm going to remove that console log and then I'm going to do a map over props dot images like
so.
So I'm going to put an arrow function into this thing and this inner function or the inner arrow function
right there is going to be called with each image from our list of images.
So now we need to use that image property or that image object right there to somehow return a image
tag that has the appropriate source.
Now this image argument right here is going to be exactly identical to some of those different objects
that we have been Konsole logging out inside of our application just a little bit ago like here's one
right here.
If you don't still see this console log you can pull open the image definition by doing a another search
and then go into the network tag and finding the request that was made number you want to select the
preview tag right here so I can look in results and I can look at the definition of each of these different
images.
You'll recall that we kind of already looked through here a little bit inside of this image object is
the you are ELAS property and it has a links links to a couple of different URLs inside of here.
Chances are we want the regular one.
So back inside of our image list to specify the actual You are L for the image you want to show on the
screen.
We will reference image dot your L's dot regular and that's going to return that really long you are
l right there and then finally we need to make sure that we take this rate that gets returned from the
map statement and return it from the image list.
So I'm going to assign the array that gets created two images and then I will reference that variable
inside the div like the
now as a quick side note.
So you know we don't have to always return a div or some element from a component.
We could have just as easily return that array directly like so that would have been an option but when
we eventually come back to this component and do some of that work for the V-2 version of all the stuff
right here we're going to need to be wrapping this list of images with a couple of different elements.
So that's why I'm just going to leave the div in here for now even though it's not strictly necessary.
All right so I'm going to save this and it will flip back over to our application.
I'm going to leave my console open just in case we get any errors and I'll do a search for cars.
All right so I zoom away out because that's a really big image.
But you can see that we very plainly have a list of images now being displayed.
All right this looks fantastic.
You'll notice that on our console over here we got a little warning message.
Let's take a quick pause.
When we come back the next section will figure out exactly how to deal with this warning.