All language subtitles for 014 Dynamic Content_en

Now, let's start making our application resemble more closely to our actual final monstrous Rolodex

application so we know that we need to display a list of monsters.

So instead of the string, hello, Iowa, I'm going to make a new property called Monsters, and I'm

going to make it an array of objects that have a name on it.

That's a string value.

So our first monster will be Frankenstein, our second monster will be Dracula, and our third monster

will be a zombie.

So.

Here.

I want to render, let's say, just a bunch of H ones with the actual names of these monsters, right.

So how I would go about doing that is I'm going to go right to this because we don't need this anymore.

And we write our curly braces because we've got to render some JavaScript, right?

So now between these curly braces, we can really render any JavaScript that we want.

So I am going to call this Stotz state dot monsters dot map because MAP returns us the return of whatever

function we pass to.

It iterated over every element in this array.

Right.

So when I say iterate, what I mean is that this function that I write here, whatever this returns.

It's going to return in the place of every element in this array, so I'm going to call map on this

monster's array and map takes a function where the first argument is going to be the actual element

that this function is going to get called on.

Right.

So it's going to call the function we pass in on it on Frankenstein and then on Dracula and then on

the zombie.

Right.

It's going to call it on each object.

Now, what that function returns will be what gets returned out of this map.

Usually it's a new array, right, when you call map.

But React is smart enough to know that if we end up rendering out a bunch of HTML blocks right in an

array, then it will just display those elements.

So let's take a look.

So our first element, right?

Our first argument is monster.

So I'm going to return a new one.

But.

Each one.

Where I'm going to, again, call the curly braces, because this is a new return block, right, of

TML, just like here, right?

It's going to need new curly braces.

And inside I'm gonna call monster name.

Now, what we should see.

Is the name of each of our monsters, right?

We see that now if we open up our console, we'll see this warning that says each child in a list should

have a unique Kiprop.

So it's asking us to add a unique key to every child that gets return out of this map.

Right.

We got to provide something that is unique completely to this list of elements.

Right.

So let's just make a value of ID and just call it something like this.

Right.

On any random unique string.

Well, work.

The reason why we want a unique key.

Is because React needs to know.

What element it needs to update if one of these elements in our array has a value that changes right

now, let's say, for example, the user does something and it changes the name of our first.

Monster from Frankenstein to Banshee, for example, right, like let's say it does it in the code somewhere,

like the same way that we saw when we called sets state earlier.

Well, REACT is smart enough to know that it only needs to update that first one.

Right.

To change it to that new the new prop..

It doesn't need to re render all of these and the key helps react, understand it helps it know which

element is the one that's been updated.

Right.

Which is attached to which element so that it knows that it doesn't have to render everything.

You can see how if this list was way bigger, it would be really performant heavy to render all everything.

And that's what makes react so great.

It's that it's smart.

It knows that if only one element in a list of a thousand elements changes, it only needs to re render

the part of the HTML that matters, not the whole thing.

So now that we have our list, we actually want to make this look closer to the final.

So right now, these are just placeholders for us to understand a little bit more of what it's like

to write, react right where, iterating over an array and creating new elements.

But let's actually dive a little deeper into it.