All right, and once we have covered a simple example, now, of course, let's iterate over our books,
our access each and every item, which is a object.
So I'll start by removing the suckers starting from line twenty to twenty four.
I'm also not going to be looking for the names.
I'm going to go right for the box.
So like I said, we can set up separately variable and then render it here or we can iterate over it
in the stacks because remember that map will return in.
Right.
So now I go with a map method and then I would want to access each and every item in my callback function.
Correct.
And I'll name my parameter book.
Just keep in mind that whatever you name, this parameter will just point to each and every object in
our iteration.
And for the time being, I'll just return a low because I would just want to see how everything is going
to work.
So once I return this hello notice I'm not acceptable.
So what I want is great out.
But I have two values.
Now, why do I have to?
Because I have two items in the array.
So as I'm iterating with MAP, I will always return the amount of items that I have in the original.
So if I would have two thousand since I'm just returning a hello from this function, I'll have two
thousand.
So now of course, if I really wanted to start out, I can say, well, show me that book.
And that book should be this object.
It should be the first object and second object, OK?
And we already know that, of course, I can either access those properties using DOT so I can say book
dot, author of book image or whatever, or of course I can use the structuring.
So I'm here.
I'm going to say consed and learn what properties I'm looking for the same ones I img then title and
the author.
Now that is coming from the book.
Now I'm not going to consult them anymore.
I just want to showcase that here.
I can return whatever I would want.
So if I really wanted to I could say that there's going to be a div.
Now I'm not going to add a image but all the other ones where I say heading three for example, with
a title and then having six is going to be with an author.
So let's add those two values.
And now of course I have the name as well as the author.
So I have these devourers.
Like I said, I can return whatever I would want from this my method.
And of course that will be displayed.
The key, of course, was that we could not render the object.
That's why specifically we need to look for those properties.
OK, good now.
Well, if we put two and two together, I already have the book correct.
I already have the component.
So in here, if I can return whatever I want, well, why don't we return a book.
So what we would need to do is just change around the div to a book.
And now in the book, of course, the biggest question is how do we pass in the props?
Well, I could add them one by one.
I could say I'm G is equal to G.
That equals the title.
That is doable because please keep in mind that in a prompt I already the structure them correct.
I heard the structure of IMG title and author.
However, there are two other words.
How I can do that.
So in this video I'll show you the first one and then in the next video I'll show you how we can use
a separate operator instead.
So instead of passing all of them here one by one, I could simply say, all right, you know what?
There's going to be a book prop and that book will be equal to a book that I'm passing it.
So remember, we were looking for what?
We were looking for the object here.
Correct.
So instead of the structuring one by one IMG title and author, we're going to say I'm going to be passing
this object as a prop.
Nothing stops me.
However, the problem is going to be that we will get an error here.
Why?
Because now props is not simply a object with IMG title and author.
It's going to be a object with a book object.
So let's see.
We're going to go with props.
And like I said, there's going to be no Vallauris here because we're not accessing the title, but
notice how Props now has the property that is the value.
And then in that object, I see that I have my properties.
So what do we need to do over here?
Well, simply, we would just need to set up props.
And then the property that I'm looking for, what is the property?
That is, of course, a book.
So once I do that now, I only have this warning about the child, which we will fix in the next video.
However, let's see the cool thing where now I'm iterating over my aura and for each and every object,
I'm returning that book.
And what that means is that, for example, I can go and find another book.
So, for example, this one, I'm going to go and I'm going to set up a copy image address.
And in here, let's just make another object.
So copy and paste for as the image value that is, of course, going to be equal to my new book, then,
of course, will also get the author.
Like so and I would want to do the same thing with a title as well, so a copyright value and of course
I'll pass it in the title.
So now if we navigate to a bigger screen, check it out.
Whatever items we will have in our right now, of course, we are displaying them.
And for each and every item that we have, we're using that book component and we set up the map method.
So now we don't need to manually keep on adding this book component each and every time.
And we don't need to manually keep on adding OMG title and author.
But what we could do instead is just grab our book, meaning our Perama, which will point always back
to that item in the array, which in our case is the object.
And then of course where we have the props, we are just structuring our.
In this case, we're not structuring the props.
We're restructuring the book properly.
So in this case, of course, I can just remove this book altogether.
Correct.
So now, of course, I can see in my console that I have three items.
Why one?
Because now I have three items in the array, so I guess I can remove this console as well.
Now, we just need to fix this.
A little warning about the fact that each child must have a unique key.