Okay.
In this video we will be talking about loops, how we can actually perform and display a loop element.
So before we will do that, we need to.
Create an array that we can use in our example.
So let's create a constant and that will be an array of animals like that.
And what I can do is it will be a simple array and we can do a cat and then we can do another one dog,
and then let's say horse.
So we have a simple array here.
And if we would like to loop through all that animals and put it on the page, we need to do it here.
So what we can do, I will remove what we had before and I will have just one single curly brackets
here and we'll start it from here.
So if I will save it.
Now you can see there is not an A in the footer actually, because at the moment we are working in the
footer.
JS So what we can do is we can access our.
Variable as it is here and then we can do map on it.
Map is a JavaScript function.
So basically what we have here it is it we need to pass a callback and we can loop through all of it
and do something for each record.
We can do a traditional function or we can do arrow function.
I will do an arrow function here so I can do animal.
Like that.
So it's a variable that will have an access to wherever we will loop for an next item and then I will
have curly brackets again.
So this is my function here.
And so what I can do here is I can return something.
So return and I can I could return animal like that.
So that's my.
Simplest loop from from what I can do now.
So if I will save it, You can see here cat, dog, horse altogether because I just return animal and
animal.
It's just a simple string.
So what I can also do is I can do any element we have like that.
So if I will save it.
Now, you can see this is not printed anymore.
What I will need to do is I will need to wrap it in another curly bracket.
So that means use the animal.
But it's not going to be word.
It will be actually a value from this animal.
So I will save it.
Now you can see cat, dog, horse.
It is displayed.
So that's a simple loop we have on our page and it's looping through all of them and do one for each
of it.
So what else we can do?
We can have more than one line.
So we already talked about how to do it, so we'll need to wrap this in the parentheses and then I could
do something like that and then I could, let's say, duplicate this and also I will do a div.
Like this.
And then I will save it.
So you can see each of these.
It's printed twice.
So we are not restricted to just one line or one thing to display.
We can display here anything what we like.
So that's very useful for things like if we have a complex object and let's say we would like to see
our titles of the articles or something, we can actually go for each article and then we can have a
title, we can have a description image and so on and so on.
So this, this will be a very useful map method that it is available on the JavaScript and we can use
it for looping in our view.
And but there is one thing that I would like to show you that is not working at the moment.
So if I will inspect this page and I will go to the console.
I will make it on the bottom.
I like that.
So you can see each child in the list should have a unique key prop.
And so what?
What does it mean exactly?
It means that if we loop through that, React doesn't really know what to do with this one because it
will try to treat every single record as a unique one.
So what we need to do is we need to pass a key to our loop.
And if I will pass it key like here, normally if you have just one record like H one returned here,
you will need to pass a key here.
But you always do it on the top level.
So if you return this div, this div will need to have a key and I can do key here and then I can name
it in a unique way.
I can do animal here because I know that animal is unique.
I have cat, dog and horse.
So what I could do is I could save it.
And now I don't have that error anymore because what I'm doing is each of these items.
So this is one item here.
This is another item because I print it twice and this is another item.
So each of these is unique because I add key animal to it.
So if I will copy on this and inspect.
And then it's a little bit I will need to make a little bit more space here and but maybe on the side.
If I go here, I can't really see keys here.
But that's very that's unique for React and React will treat this as a separate item on the page.
In this way he can actually distinguish in between these different items in a in a loop.
So that's how it is.
Things are done and we can do a loop this way.
But normally if you have an array like this, you should find something that will be for sure.
Uniqueness.
I know this is unique because I just made it up, but if you fetch some data from the database, from
some backend, then you you can't be sure all of them will be different or unique.
So what you can do is usually when you loop through the array of objects, you have something like an
ID, so you will have animal ID.
In our case we don't have it because it's a simple string, not an object, but the ID will be perfect
for our keys and then you can have animal name or whatever you might have on your object.
But the ID are ideal candidates for using that for key because we know that ID is unique coming from
a database.
So this is the way we can actually use it.
But in our case we don't have it and we are secure because I've made up this array and I know this is
all unique, so I will save it and I can actually get rid of one of those.
And we have our loop here.