1
00:00:00,440 --> 00:00:04,400
So in this video, we'll see how to get dynamically data from the components.

2
00:00:05,240 --> 00:00:09,530
So as you can see here, we have, like each and every product component, has some different data.

3
00:00:09,920 --> 00:00:12,260
So how to use the same components for different data?

4
00:00:12,500 --> 00:00:14,600
So here comes our concept of props.

5
00:00:16,370 --> 00:00:17,360
So what we'll do is.

6
00:00:18,510 --> 00:00:22,260
In the home, not just when we are calling product Vince and some props for it.

7
00:00:22,810 --> 00:00:29,100
OK, so that we can use the props, we can catch the props in the product dodgers file and use them.

8
00:00:30,090 --> 00:00:31,350
So how to send these drops?

9
00:00:35,300 --> 00:00:40,940
So the props will be like a key value pair, but instead of color, it will be equal to symbol.

10
00:00:41,300 --> 00:00:43,880
So basically, I'm changing the title for it.

11
00:00:45,200 --> 00:00:45,470
OK.

12
00:00:45,680 --> 00:00:51,740
The title will be, as you can see, it will be OK, the first proper, that title would be the same

13
00:00:51,740 --> 00:00:52,010
thing.

14
00:00:53,430 --> 00:00:56,160
So are we sending this item?

15
00:00:58,190 --> 00:01:04,010
There shouldn't be any miner coal, and it is similar like you are giving like in the general elements,

16
00:01:04,010 --> 00:01:09,050
if you are having like multiple attributes will separate them using space for it.

17
00:01:09,050 --> 00:01:12,910
Simply like this is a female tag that we're are creating constantly.

18
00:01:13,400 --> 00:01:19,040
OK, so the customized Democrats are actually sending some attributes that those attributes are contested

19
00:01:19,190 --> 00:01:24,260
so they shouldn't be any commodity for any coal or anything.

20
00:01:24,350 --> 00:01:30,300
Yes, the attribute name and the value, the key value parameter equal to descent and then also title.

21
00:01:30,560 --> 00:01:31,760
I love sending the price.

22
00:01:33,620 --> 00:01:38,210
So when we are sending a value army, we are sending something other than text, when we want to send

23
00:01:38,210 --> 00:01:41,780
the value out of function, we have to send it in JavaScript object.

24
00:01:41,960 --> 00:01:47,960
So instead, I mean, if we want to send a JavaScript object, we have to use curly braces for an enterprise

25
00:01:47,960 --> 00:01:51,650
like eleven point nine six and the rating.

26
00:01:53,500 --> 00:01:58,810
Rating will be five, and then they made itself, so I'll be sending the image you autumn.

27
00:01:59,500 --> 00:02:01,870
They made you all will be the same thing over here.

28
00:02:09,440 --> 00:02:15,170
So when they are sending props like when we are using the same components for different with different

29
00:02:15,170 --> 00:02:18,260
attributes, we need to send that I'd like every product should be unique.

30
00:02:18,260 --> 00:02:23,630
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

31
00:02:23,630 --> 00:02:24,200
that you're using.

32
00:02:24,830 --> 00:02:27,740
So we're giving this three one two three two one three four one.

33
00:02:28,340 --> 00:02:28,530
Yeah.

34
00:02:29,570 --> 00:02:31,880
So with this, we have completed the props part.

35
00:02:32,890 --> 00:02:37,690
So the second product, the third product, the fourth product, similarly, we can give whatever title

36
00:02:37,690 --> 00:02:39,310
we want the price, the rating element.

37
00:02:39,730 --> 00:02:41,220
So yeah, I do that.

38
00:02:45,660 --> 00:02:49,960
So now, as you can see, I give props to each and every product, like for each and every product,

39
00:02:49,980 --> 00:02:55,160
I give a unique idea to give different items, different price, different rating and then different

40
00:02:55,170 --> 00:02:55,560
image.

41
00:02:56,050 --> 00:02:58,590
So no, but if you see the website.

42
00:03:00,370 --> 00:03:04,940
There is nothing different, like everything is of the same product, like the same product is there.

43
00:03:05,260 --> 00:03:10,900
Somehow the chain is basically here we are only sending the data, but not like using the data.

44
00:03:11,260 --> 00:03:16,750
So he had what you have to do is you have to gather data that proves that we got the mescaline and.

45
00:03:18,080 --> 00:03:19,820
Use the props.

46
00:03:21,090 --> 00:03:26,620
So instead of medically taking the props, I will be structure the object itself, so then release structure

47
00:03:26,620 --> 00:03:31,230
of the object, we have to open calibrate and then the key key names.

48
00:03:31,440 --> 00:03:34,260
So the key names are title plays, isolating image.

49
00:03:34,560 --> 00:03:41,130
So in addition to the object, we have to use the same name as that of the attribute key names so that

50
00:03:41,130 --> 00:03:43,050
when we are tightly, highly tightened.

51
00:03:45,250 --> 00:03:45,790
Image.

52
00:03:47,270 --> 00:03:48,410
Price and rating.

53
00:03:50,290 --> 00:03:56,020
So we have to use them inside this thing, so inside the paragraph I'd be as entitled to, as I said,

54
00:03:56,020 --> 00:04:01,810
when we use JavaScript objects or JavaScript variables, we have to open and calibrated.

55
00:04:02,980 --> 00:04:03,790
So this will be.

56
00:04:04,740 --> 00:04:10,380
Tighten and apply pressure equity based in dollars in Milan, when?

57
00:04:11,480 --> 00:04:12,230
The price.

58
00:04:14,850 --> 00:04:21,990
We'll come to the rating and see how to give a number of stars based on the given number, but we'll

59
00:04:21,990 --> 00:04:23,640
do the rest of the things they match.

60
00:04:28,530 --> 00:04:30,510
As you can see, the image will be in the format of.

61
00:04:31,170 --> 00:04:35,460
So we can send directly the image and.

62
00:04:39,480 --> 00:04:45,750
So when you check that now we can see like the title, the price and the immediate change dynamically

63
00:04:45,750 --> 00:04:46,470
using props.

64
00:04:46,680 --> 00:04:48,000
But the shots are too fat.

65
00:04:48,000 --> 00:04:51,120
The same like that starts the same for each and every product.

66
00:04:51,630 --> 00:04:57,240
So now we'll see how to create the stocks based on the rating them, but the data that we get.

67
00:04:58,840 --> 00:05:00,340
So it's going to get what we have to do is.

68
00:05:02,550 --> 00:05:04,170
Will create the added operating.

69
00:05:05,070 --> 00:05:11,010
So since we are creating our should, it is a delicate object that we have to use it in collaborators,

70
00:05:11,370 --> 00:05:12,330
so create it.

71
00:05:13,670 --> 00:05:14,350
Penetrating.

72
00:05:17,990 --> 00:05:20,840
And then, Phil, each and everything of the idea.

73
00:05:21,830 --> 00:05:22,700
And map through.

74
00:05:24,570 --> 00:05:26,490
I will map through individual items.

75
00:05:34,730 --> 00:05:37,310
Oh, I knew the arrow function.

76
00:05:45,910 --> 00:05:49,200
Will be a feedback that a single star.

77
00:05:53,140 --> 00:05:54,730
Now I can find this out immediately.

78
00:05:55,790 --> 00:06:01,160
He made it that thing and stop so I could finish whatever it is, I cared about it.

79
00:06:01,580 --> 00:06:07,340
I feel each and every like I do fill the hole that you have to use the doctrine matter and through mapping

80
00:06:07,340 --> 00:06:11,870
like inside this, you don't need anything like, I thought, I thought this outfit will work.

81
00:06:12,080 --> 00:06:15,840
But for like the basic structure will be like this.

82
00:06:15,850 --> 00:06:19,870
So I'm doing this for each and every item of data.

83
00:06:20,060 --> 00:06:23,240
And it means that in the two parameters will be the item.

84
00:06:23,240 --> 00:06:26,750
And then so everything, I have to fill it with a paragraph star.

85
00:06:27,630 --> 00:06:28,300
So as you can see.

86
00:06:29,450 --> 00:06:34,760
So now, if you check the ratings are dynamic, like if I give the number five in the props, like if

87
00:06:34,760 --> 00:06:40,010
you've seen The Hunger Games, I have sent rating as fighter, the first product rating as for the second

88
00:06:40,010 --> 00:06:43,550
product and you can see rating fight, the first product rating for the second product.

89
00:06:44,120 --> 00:06:45,380
So this is our like now.

90
00:06:45,380 --> 00:06:50,150
We are done with the with our home page, with our head, that section and the home section with products,

91
00:06:50,150 --> 00:06:55,580
everything with the information of the products and dynamical different components using the props.

92
00:06:56,060 --> 00:06:58,550
And then I structure the object over it.

93
00:06:59,480 --> 00:07:03,380
And then I ended up I did not film at that dark map method for the project rating.

94
00:07:04,070 --> 00:07:06,200
So you're going to see this result of this.

95
00:07:06,200 --> 00:07:12,320
We complete the homepage and from the next video, we can see how to start building that from the checkout

96
00:07:12,320 --> 00:07:12,560
page.

97
00:07:12,560 --> 00:07:17,690
If you click on this box that we have to get a checkout page with the products and then the total price,

98
00:07:17,960 --> 00:07:19,220
so we'll see that in the next few.