All language subtitles for 10. Tying Data to a Component3

We can now show a correctly styled card on the screen but we're only showing one right now as a quick

reminder if we go into our app component HMO file we can't duplicate that app Card element down a couple

of times and every single time we show app dash card that's going to create a new card component and

displayed on the screen.

If i duplicate that twice and then save the file and go back over to my browser on I'll see it.

Three cards appear.

We can definitely show this component multiple times.

But now every single component has the same image same title same content same user name and so on.

So in this video we're going to figure out how we can show multiple copies of this component and then

customize each and every one to do so.

We're going to first open up our app component inside there.

We're going to define a new property called posts this post property is going to be an array of objects

each object inside that array is going to represent data that we want to display on a single card.

The we're calling a post the data that we want to show inside of a card you'll notice that inside of

each of these objects I'm only printing out kind of a title property right here meant to represent the

title on each different card we create those objects are also gonna have some other properties as well

such as the link to the image we want to display for each card the user name and the content.

I'm only showing title on this diagram right here just to keep the diagram easy to read and understand.

Once you create this array of posts we're then going to create a variety of different card components

into each card component.

We're going to pass down a set of configuration options for example to this first card.

We're going to pass down a title out of that array right there of neat tree.

We're then going to set up this card component.

So it takes that title and uses it to customize itself the step one in setting all this up is to define

this post's array as an array of objects on our app component.

Let's do that right now.

I'm going to change back over to my editor.

I'm going to find my app component.

Dot yes file inside there.

There's already one existing property called title that was added in automatically when we first generated

our project.

We don't need that title property at all.

So I'm just going to delete it and inside of here I'm going to create the array of objects.

So again each of these objects represents one single post.

We want to take each post and pass it down to a card component.

I'm going to give this first one a title of neat tree mostly gonna add in all the other properties that

we need to represent a card as well.

So in total I think that there are a couple of different properties we really need here.

First off we need some title property to represent the title of each card.

We also need the user name for each post.

We're going to call that a property called User Name the content on here will give a property name of

content.

And then finally the image at the very top or the link to it will call the image you are El.

We're going to add each of these properties into each of those three objects.

We're going to put into this post array.

So in other words we're going to do a little bit of typing right now though after title I'm also gonna

put in image your URL and I'm going to make this the assets tree dot j peg I'll then do what user name

which I'll make.

How about nature and content which will be.

I saw this neat tree today.

Now we can copy paste this object down twice or the other two posts we want to create I'll paste it

down once and then twice and on the second and third objects I'm going to go through an update a couple

of these different properties on title on the second one.

I'm going to change that to snowy mountain.

I'll change the image you are L to mountain dot JPEG because remember that is the name of our image

inside of our assets directory I'll change the user name to about mountain lover and content.

Change that to.

Here is a picture of a snowy mountain.

And then finally we can update the properties on a third object as well.

I'll change the title to mountain biking remember our image you are all in this case it's gonna be the

assets directory we want the biking dot JPEG image out of there we'll do assets slash biking dot j peg

we'll make the user name biking one two two two then finally I did some biking today Okay so we now

have this array of objects on our app component so now we want to take each of those objects we want

to pass each of them down to a separate instance of our card component.

Now again this diagram right here just a little bit misleading because I'm not showing all the properties

inside those objects but essentially want to take all the properties inside of each object and pass

them down to each card.

Let's figure out how we do that in the next video.