Nicely done.
And once we're experts on props now, let's focus on our data, because at the moment, notice we have
Facebook, we have second book and life is great.
But we are somewhat repeating ourselves, aren't we, where I'm creating some component when I pass
and the props van, for example, I would be setting up some children and we can already imagine that
if we have a list like they have in the Amazon, it would be somewhat tiresome to keep on repeating
the same stuff.
So each and every time we would need to create a object line, each and every time, we also would need
to set up a component and then notice how our file is getting bigger and bigger.
So if I have a hundred books like this, it is not very practical.
So how we could change that around is we could set this up as an array so we would still have objects,
but they will be in the array and then we could iterate over that.
And for each and every item display that book.
So that way we don't have to repeat ourselves.
And yes, again, we will refactor the application.
Now, let me just quickly mention the reason why we keep on refactoring, because, of course, we're
starting with the most basic example and we're slowly building up.
And then as we're building up, yes, we will delete some stuff.
Yes, we will refactor some stuff, because that's the only way we can do that.
So I'll remove my children for the time being.
We really don't care about the children.
Then why?
Of course, we're dealing with children.
We're also will remove them.
Now, of course, you can keep them if you want, but since we're not passing anything in doesn't really
make much sense.
I'll also remove this children as well.
And I guess let's start with our list, so first we're have the first book and second book, I can just
simply remove both variables so these will become our objects.
Now, what do we need to do here is simply set up, right.
And I'll call this box.
So Consed is equal to a box.
And then of course, let's enclose both of our objects.
And of course in here it's not going to be a semicolon anymore.
It is going to be a comma and same thing over here.
Let's remove that semicolon.
So now of course we get a bunch of errors.
Why?
Well, because there is no variable anymore.
First book and second book.
And I think it's actually going to be quite easier if we just remove the both books as well for the
time being.
Don't worry.
Later, of course, we will add it.
So what I would want to showcase first, but first I want to showcase that.
Yes, of course we can access this book.
All right.
So in the book list, I'm going to go back to JavaScript, so I will set up my curly braces and I'll
just type books now.
Life is great, but it says over here that objects are not valid as react child.
OK, what is happening over here?
Well, we have the array, but each and every item in that order is an object and react will complain
that, listen, I cannot render the object.
OK, so let's start out with just an array of strings thrown here.
I'm going to go with Consed and the names and I'll pass in the area again.
So John and then Peter.
And then also let's set up Susan.
So three names analysis throughout.
And by the way, the reason why I showed you this error, because once in a while you will have this
error when essentially you will set up a map method that we will cover a little bit later.
So once you hit this error, just try to remember that you're not accessing the proper values, because
if you have this error of the child where it is an object, that just means that you either haven't
the structure properly or you're not acting properly.
So now let's start out with those strengths.
So now I'm going to go back to names and life is awesome.
I am displaying Meyera correctly in Riak.
Now, the Gotcher here, of course, is that I'm not dropping those names in anything right now.
How we can wrap our JavaScript values in the HMO.
And of course, in JavaScript, we do that with a map method so I can write it here where I'm accessing
the Joska plant or I can set up a new variable that is up to me.
So I'll try it with a new variable here.
And then when we work with those books, then of course I'll do it right here in the react, meaning
in the G.S..
So let's call this new names or contact new names, and that is equal to a name.
And of course, I'm iterating over this.
All right.
Using a map method.
And now what I would want is to wrap each and every name in adding one, because at the moment, yeah,
it's nice.
I can see my list of names, but it's also somewhat meaningless because it is not displayed nicely.
So I already know that with my method I'm accessing each and every name.
Now, if you want to access that, of course you can just set up a perimeter and to say your name.
And then for the time being, if you want to consult Lorgat, sure, console the name.
And this is also something that will do a lot in the course is we will consider log it now also comes
a new name just so we can see the result.
And once we take a look at the console, I can see that each and every time I'm logging a name.
All right.
So that is John, Peter and Susan.
But my values come back as undefined.
And the reason for that, because I'm not returning anything.
So, OK, we have the names and I can access each and every name.
Why don't we wrap this in the HDMI?
Meaning instead of just displaying what items I have in my right now, I would want to display each
and every item wrapped in adding one.
And the only thing I would need to do is go with a return.
Then I'll set up my current one and then I'll pass in the name.
So in here, of course, if I want to access that particular variable, I would need to go with a name
like so.
So that's how I'm accessing right now.
So I'm mapping over and I'm saying, yeah, get me to having one and then I'm going back to a JavaScript.
Remember, that was the setup where essentially we were sending up the name.
So now of course, if I check it out my value, then this will be already different than I had before.
Before that, I had undefined.
Now, essentially, you can see that I'm getting something interesting now that something interesting
is my having one.
Now, what I'm trying to say over here is, by the way, you know what?
I want to return to new names.
So if we will go back and if will say new names.
You'll see that now I have John, Peter and Susan, don't worry about this warning, we will fix it.
But the more important part is here that yes, in react we can right away render Vatterott.
However, that right, of course, cannot be objects.
So if you're going to have objects, you will have some problems and errors and all that power if it's
just a simple string.
Yes, of course.
You can render, however, is going to make way more sense if we will wrap those values in something
more meaningful.
In this case, of course, that is Kangwon.
But in the next video, we'll take a look at how we can iterate over the array that has the object and
instead of just adding one.
Now, I would want to return a component for each and every item, not a heading one, not of having
two or whatever, but the actual component.