All language subtitles for 022 Card Component_en

Now that we know what to do with our card list component, we can actually take it a step further.

So earlier we were just passing children in and rendering it between our outside div, but we don't

actually want to do that because right now our app component is actually the one that is currently responsible

for mapping over that list of monsters and then creating those elements.

But we actually want to give that responsibility to the list component because the card lists component

should be the one responsible for listing the cards.

So let's actually move this into it.

So first, what we're going to do is we actually don't need this anymore.

This is completely unnecessary.

We're going to pass in the monsters as a prop.

From our app component.

And then we're going to move this into.

The Carlist.

So we know that we don't need the children anymore.

Instead, we're going to generate it ourselves and it's not off state, it's off of the props.

So if we do this, everything should stay the same, which it does, which is awesome because now our

app doesn't have to worry about creating those monster cards, right.

The cardless component is the one that's responsible for it, which is great because that should be

the responsibility of the cardless component.

But what the cardless component is not going to be responsible for is deciding how this component will

look.

So, yes, we could create our element and add those images all here.

Right.

But then we don't want to do that because we actually want our cardless component to not have to think

about that.

It should only think about what it should add.

Right.

It should only think about rendering them.

It should actually think about how to create them.

So we're going to make a new component to do that.

And that component is going to be a card component.

So let's make a card folder in our components folder and inside, let's make a new card component,

dodgier sex.

And we need to import react like we always do.

And we're going to export this constant card, which is going to be a new functional component that

will return a div an inside, we're just going to make it the same thing that we had earlier.

Right.

Now.

This key actually is still going to go on our component, we're going to make sure to do that because

we want to still be aware that if any of these monsters update, I only want you to update that one

element that gets affected right now that we know that what we want to do is we no longer have access

to the monster in the scope.

So what we've got to do is we're going to pass that monster the same way we passed monsters into the

props from our app.

Right?

We passed Monsters in.

We're going to do the same thing and we're going to pass an individual monster into our car component.

So we're going to do props to Monster here and make sure to add.

Let's first import the card.

From.

Card, hard component.

Oh, we actually don't need.

Any of that?

And then we got to pass a monster.

Into Archerd component.

Right, so we're passing Monster into the card component and the card component gets it from the props

and displays the name and if we check.

It stays the same, which is awesome.

That's exactly what we're looking for.

Now, to add the styling, to make it look closer to our actual application.

Just like before, I have the styles already written for you guys, we're just going to do the same

thing that we did last time.

We're going to make a new card.

Styles says.

And then we're going to use this card container class and the styling for it inside of our car.

I forgot to import, of course, don't forget that we got to import those thousand.

To our final.

Now we see.

This card has all of these stylings on it, right, just like before, it just doesn't have the image

anymore.

But just like our final application, it's trying to look much closer.

Now, what do we get, the image, the image I actually get from this website called Robo Hash and from

robo hash, it's very easy to get unique images of these funky looking monsters just based on a changing

number that you pass to the URL, which is really great for our purposes.

So we are going to add a new image, right, with an all text of monster.

And we're going to do our source, which is robot hash, except instead of this number, we are going

to add our props monster ID because the I.D. is a unique number.

And then this is what's called a you are al parameter.

So with this parameter, I'm essentially saying to use this set of images and it's all on the website,

you can see what other parameters you can add.

But another great one we can add is size.

So if we add an ampersand, we can say size equals and I want to do one eighty by one eighty.

If we say and we look at our image.

We see that it's there.

We see we have these robo images and we have our names and now we're looking really close to our final

application.

So let's just add the email as well, and instead of an H1, let's use an H2.

And then a P and let's just do props dot monster.

Email.

And now when we look, we see it looks exactly like what we have in our application.

Awesome.

So now in the next section, what I'm going to add is the actual search bar and we're going to see how

we can filter out and add more functionality to our components.