In the last section we spoke about how we can somewhat fix this issue of tiling and making sure we don't
have too much space here by using the grid row and rule but we really need to specify a grid row and
value depending upon the height of each individual image.
So to solve this we're going to create a new re-act component.
This reac component is going to be responsible for rendering one single image at a time once the image
is rendered.
This component is going to figure out how large the image is and then adjust this grid row and rule
to accommodate for that image size.
Now in practice it's give me a little bit more easy than it sounds.
Essentially what we need to do right now is create a new component that's going to render each individual
image as opposed to the straight image tag that we're using right now.
So inside of my code editor I'm going to find my components directory and inside there I'm going to
make a new file called Image card.
Yes.
So the purpose of this of this compound right here is to show one image by itself.
Let's just focus on that for right now and then once we figure out how to do that we'll then figure
out how to do.
Like the auto adjustment of the great Roe and stuff.
So inside of image card I'm going to import re-act from react and then make a new class called Image
card that extends re-act component.
Then inside of your we'll start simplify right now.
I'll say that this thing has a render method.
It's going to return a div and inside that div I'm going to put my image tag.
Now we're gonna specify a Allt property and a source on this thing as well at the same time.
So I'll do an alt.
We will assume that our image object is going to be passed to the image card as a prop called image.
So to specify the property as we did before inside of image list where we use the description I will
say this does props that image description.
And then for the source I will do when I do a new line here because this is definitely going to be a
very long tag.
I'll do a source of this props.
Image you or else.
Regular.
And then finally at the bottom I will export default image card like so.
All right I know I'm putting this code together very quickly here.
All we're doing is creating a new component that right now is showing a div with an image inside of
it.
This component expects to be passed a prop of our image object or the thing that we got back from that
on Splash API as a prop called image.
So let's save this thing we'll flip back over to the image list file and we're going to use this image
card inside of our list as opposed to the current straight image tag that you see right here.
So I'm now inside of image list going it claps my sidebar so we can see this more easily at the top.
I will import image card from Image card and then right here rather than doing the plane image will
do image card.
And now we do not need to pass in the description or the prop We do not need to pass in the sarcy all
we need to pass on is the image itself.
So no longer am I going to do destructuring right here.
I'm going to return it to its original form where we were receiving the entire image object and I'm
going to pass that image in as a prop called image.
And then finally I need to fix up the idea right here.
We still need to provide a key.
And so now the idea is going to come from Image dot ID because as I said we are no longer destructuring
the id property out of that thing.
OK.
And we should now be able to save this and then flip back over to our browser and we should still be
able to see a list of images.
Awesome.
Looks like we are.
All right.
And then very quickly I want to make sure we don't have any errors or warnings.
Yep that looks good.
OK.
So we've now got kind of feature parity here by creating this new component.
Let's continue working on sync because we've got a couple more things to do now.
The first thing I know without doubt I can tell you right now we're going to have to refer to this image
objects several times inside this render method rather than referring back to it with this stop Propp
site image over and over let's deep structure out just the properties we care about.
Off of this stop Propst image as we did before.
Back over here inside of our map function so inside my render method Osei Konst description and your
els.
And that's going to come from this stock prop's dot image.
And now inside of this tag right here I can reduce it down to just description and down to just your
Elle's regular OK I'll save.
And it looks like we condensed to that right there.
OK.
So looks pretty good.
Let's take a quick pause.
When we come back the next section we're going to add a little bit more code to our image card to make
it look just a little bit better and we'll start to focus on adding in all of that grid Arturo's and
the grid row and did all that good stuff.
So quick pause and I'll see you in just a minute.