In the last section we spoke about the purpose of kids when rendering lists.
So let's now flip back over to our code editor will find the image list component and we're going to
do a little update to this then.
So here's where we are rendering our list of items we want to find the root GSX tag that is being returned
from our map statement.
So in that case it is very plainly the image and so on the image I'm going to add a key prop and I'm
going to give it a I.D. out of this image object image dot ID.
Now this I.D. property right here not just like making that up or pulling it out of thin air.
If you actually go back over to your application and again and go to the network request tab and look
at what gets sent back over to us from the API you'll notice that every single one of these objects
has an IP property that uniquely identifies it.
So I didn't just make up that id property.
It's something that actually exists inside of this image object.
All right.
So I'm going to save this as a quick note.
I mentioned just a second ago that we're going to add the key property to the root tag that we are returning
inside the map statement.
When I said that I meant to say that if we had some like div that wrapped the image like so then we
would add this key property to that div instead and not the image anymore.
So we only have to assign the key to the root element that we are returning from a list of records or
already in a list of different components.
In this case no need for the div some is going to return the image by itself like the OK so Will now
flip back over.
I'm going to leave my console open just in case we get another error.
I'll zoom in a little bit so I can actually see what's going on again.
And then I'll search for cars.
OK.
Looks good.
So we don't have a warning or error message anymore.
Now I notice one other little thing here.
Reality has or is shipped recreate react up to be precise create racked up has a little set of rules
that wants you to that wants to see you put in a Allt prop or essentially a descriptive or a description
of the image that we're trying to show on the screen in case the image is not able to be fetched or
if someone with accessibility problems is using our site.
So just to get that little warning to go away we can add in a prop to these images as well.
But the prop fortunately each one of these images that we're fetching has a description property right
there so we can use this description for the image itself.
It's a perfect use case for the prop I guess I'll put an image description like the.
All right.
Now one last thing I want to do here.
You'll notice that we are referencing the image variable three times inside this mapping function.
So rather than keeping on referencing that variable again and again and again we can just do restructure
out the three properties we care about inside of this inner function description ID and you or else
to do so I'll find that image argument.
I'm going to delete it.
I'll put down a set of parentheses and a set of curly braces inside that.
And then I can structure off description ID.
And you are L's like so and then I can remove the image and the Daut the ID and the DOT and the image
and the dot or see me.
I didn't mean to say id and dot that was image and Dot.
OK.
That's it.
Little bit shorter than what we had before.
So going to save this will do one more quick test.
Make sure we don't have any warnings or anything like that.
So search for cars and no warnings no error messages.
OK.
So that is pretty much it for showing a list of elements we've now got our list of car pictures or whatever
it is that you want to search for.
I don't know why.
As example I kept on saying like trees and plants and flowers.
I don't know why that came to mind but you know what that will do flowers anyways.
So we definitely got our list of images here which is fantastic.
But that's really just the one of our application.
Remember we had said we just want to get the list of images to show up so we're not going to say cool
looks good.
Now we're going to start to do some extra credit.
All right.
So what we're going go through starting in the next video is stuff that you don't necessarily have to
know to understand react and how it works.
We're going to go over a couple of topics that are decidedly penned not related to react but nonetheless
I think it's going to be some pretty interesting stuff.
We're going to figure out how to style these images far better than they are currently displayed.
So quick pause here and we'll continue in the next video.