So in this video, we'll see how to get dynamically data from the components.
So as you can see here, we have, like each and every product component, has some different data.
So how to use the same components for different data?
So here comes our concept of props.
So what we'll do is.
In the home, not just when we are calling product Vince and some props for it.
OK, so that we can use the props, we can catch the props in the product dodgers file and use them.
So how to send these drops?
So the props will be like a key value pair, but instead of color, it will be equal to symbol.
So basically, I'm changing the title for it.
OK.
The title will be, as you can see, it will be OK, the first proper, that title would be the same
thing.
So are we sending this item?
There shouldn't be any miner coal, and it is similar like you are giving like in the general elements,
if you are having like multiple attributes will separate them using space for it.
Simply like this is a female tag that we're are creating constantly.
OK, so the customized Democrats are actually sending some attributes that those attributes are contested
so they shouldn't be any commodity for any coal or anything.
Yes, the attribute name and the value, the key value parameter equal to descent and then also title.
I love sending the price.
So when we are sending a value army, we are sending something other than text, when we want to send
the value out of function, we have to send it in JavaScript object.
So instead, I mean, if we want to send a JavaScript object, we have to use curly braces for an enterprise
like eleven point nine six and the rating.
Rating will be five, and then they made itself, so I'll be sending the image you autumn.
They made you all will be the same thing over here.
So when they are sending props like when we are using the same components for different with different
attributes, we need to send that I'd like every product should be unique.
So we have to pass an I.D. so we can give any I.D. like that should be a need for all the components
that you're using.
So we're giving this three one two three two one three four one.
Yeah.
So with this, we have completed the props part.
So the second product, the third product, the fourth product, similarly, we can give whatever title
we want the price, the rating element.
So yeah, I do that.
So now, as you can see, I give props to each and every product, like for each and every product,
I give a unique idea to give different items, different price, different rating and then different
image.
So no, but if you see the website.
There is nothing different, like everything is of the same product, like the same product is there.
Somehow the chain is basically here we are only sending the data, but not like using the data.
So he had what you have to do is you have to gather data that proves that we got the mescaline and.
Use the props.
So instead of medically taking the props, I will be structure the object itself, so then release structure
of the object, we have to open calibrate and then the key key names.
So the key names are title plays, isolating image.
So in addition to the object, we have to use the same name as that of the attribute key names so that
when we are tightly, highly tightened.
Image.
Price and rating.
So we have to use them inside this thing, so inside the paragraph I'd be as entitled to, as I said,
when we use JavaScript objects or JavaScript variables, we have to open and calibrated.
So this will be.
Tighten and apply pressure equity based in dollars in Milan, when?
The price.
We'll come to the rating and see how to give a number of stars based on the given number, but we'll
do the rest of the things they match.
As you can see, the image will be in the format of.
So we can send directly the image and.
So when you check that now we can see like the title, the price and the immediate change dynamically
using props.
But the shots are too fat.
The same like that starts the same for each and every product.
So now we'll see how to create the stocks based on the rating them, but the data that we get.
So it's going to get what we have to do is.
Will create the added operating.
So since we are creating our should, it is a delicate object that we have to use it in collaborators,
so create it.
Penetrating.
And then, Phil, each and everything of the idea.
And map through.
I will map through individual items.
Oh, I knew the arrow function.
Will be a feedback that a single star.
Now I can find this out immediately.
He made it that thing and stop so I could finish whatever it is, I cared about it.
I feel each and every like I do fill the hole that you have to use the doctrine matter and through mapping
like inside this, you don't need anything like, I thought, I thought this outfit will work.
But for like the basic structure will be like this.
So I'm doing this for each and every item of data.
And it means that in the two parameters will be the item.
And then so everything, I have to fill it with a paragraph star.
So as you can see.
So now, if you check the ratings are dynamic, like if I give the number five in the props, like if
you've seen The Hunger Games, I have sent rating as fighter, the first product rating as for the second
product and you can see rating fight, the first product rating for the second product.
So this is our like now.
We are done with the with our home page, with our head, that section and the home section with products,
everything with the information of the products and dynamical different components using the props.
And then I structure the object over it.
And then I ended up I did not film at that dark map method for the project rating.
So you're going to see this result of this.
We complete the homepage and from the next video, we can see how to start building that from the checkout
page.
If you click on this box that we have to get a checkout page with the products and then the total price,
so we'll see that in the next few.