1
00:00:00,732 --> 00:00:02,880
‫It's time to introduce

2
00:00:02,880 --> 00:00:07,623
‫yet another fundamental React concept, which is props.

3
00:00:09,090 --> 00:00:10,980
‫And props is essentially

4
00:00:10,980 --> 00:00:13,920
‫how we pass data between components.

5
00:00:13,920 --> 00:00:16,620
‫And in particular, from parent components

6
00:00:16,620 --> 00:00:18,750
‫to child components.

7
00:00:18,750 --> 00:00:20,940
‫So we can imagine props as being

8
00:00:20,940 --> 00:00:22,890
‫like a communication channel

9
00:00:22,890 --> 00:00:26,520
‫between a parent and a child component.

10
00:00:26,520 --> 00:00:28,890
‫So in practice, what we're going to do,

11
00:00:28,890 --> 00:00:32,220
‫is to now customize each of these pizza components

12
00:00:32,220 --> 00:00:34,680
‫that we have right here.

13
00:00:34,680 --> 00:00:37,500
‫So, remember how we created the pizza component

14
00:00:37,500 --> 00:00:42,150
‫which has this image, the pizza name, and the ingredients.

15
00:00:42,150 --> 00:00:45,270
‫But right now all of the pizzas are the same

16
00:00:45,270 --> 00:00:48,780
‫because, well, we didn't have a way of passing

17
00:00:48,780 --> 00:00:52,710
‫different data into them to make each of them customized.

18
00:00:52,710 --> 00:00:54,600
‫But now, as we learn about props,

19
00:00:54,600 --> 00:00:56,433
‫we will be able to do that.

20
00:00:57,360 --> 00:00:59,620
‫So, first of all, let's

21
00:01:00,540 --> 00:01:02,700
‫grab our pizza component

22
00:01:02,700 --> 00:01:07,530
‫and cut it from here and place it right after the menu,

23
00:01:07,530 --> 00:01:10,080
‫just so we can see what's happening.

24
00:01:10,080 --> 00:01:13,983
‫And then let's get rid of this repetition here for now.

25
00:01:14,940 --> 00:01:19,290
‫So we only want this one pizza component here for now.

26
00:01:19,290 --> 00:01:22,440
‫Okay, and so now it's time to pass the data

27
00:01:22,440 --> 00:01:24,840
‫from this parent component here,

28
00:01:24,840 --> 00:01:29,670
‫which is the menu in this case, to the pizza component.

29
00:01:29,670 --> 00:01:34,670
‫So what we want to pass is basically this string right here.

30
00:01:34,740 --> 00:01:37,020
‫So, the link to the image,

31
00:01:37,020 --> 00:01:40,440
‫then the name of the pizza, and the ingredients.

32
00:01:40,440 --> 00:01:43,290
‫So to define props, we do it in two steps.

33
00:01:43,290 --> 00:01:46,260
‫First, we pass the props into the component,

34
00:01:46,260 --> 00:01:48,900
‫and then second, we receive the props

35
00:01:48,900 --> 00:01:52,083
‫in the component that we pass them into.

36
00:01:53,160 --> 00:01:56,490
‫So, here is where we pass those props in.

37
00:01:56,490 --> 00:01:58,560
‫And we write them just like this.

38
00:01:58,560 --> 00:02:01,533
‫So, just as if they were normal attributes.

39
00:02:03,510 --> 00:02:04,343
‫So,

40
00:02:05,640 --> 00:02:07,030
‫pizza spinaci.

41
00:02:08,610 --> 00:02:09,960
‫That's the first one.

42
00:02:09,960 --> 00:02:14,133
‫Then, let's also define a prop for the ingredient.

43
00:02:15,750 --> 00:02:19,590
‫And by the way, prop simply stands for property.

44
00:02:19,590 --> 00:02:21,813
‫It's just a short for,

45
00:02:22,770 --> 00:02:23,703
‫yeah, property.

46
00:02:25,458 --> 00:02:26,291
‫Okay?

47
00:02:26,291 --> 00:02:31,037
‫And then finally, let's say the photo or photo name.

48
00:02:32,943 --> 00:02:34,643
‫And then let's grab this one here.

49
00:02:38,010 --> 00:02:39,090
‫All right.

50
00:02:39,090 --> 00:02:41,313
‫And maybe let's also pass in a price.

51
00:02:43,710 --> 00:02:46,110
‫And for now, I will also pass it as a string

52
00:02:46,110 --> 00:02:48,780
‫but I will show you something in a minute.

53
00:02:48,780 --> 00:02:51,060
‫So for now, just write it like this.

54
00:02:51,060 --> 00:02:52,590
‫Give it a save;

55
00:02:52,590 --> 00:02:56,370
‫and then Prettier will format everything nicely like this.

56
00:02:56,370 --> 00:02:58,590
‫And now we need to go to the second step,

57
00:02:58,590 --> 00:03:01,440
‫which is to actually receive the props here

58
00:03:01,440 --> 00:03:03,780
‫inside the child component.

59
00:03:03,780 --> 00:03:07,530
‫So right now, of course, the component has no way of knowing

60
00:03:07,530 --> 00:03:09,993
‫that these four props have been passed in.

61
00:03:11,100 --> 00:03:14,670
‫So, the way we do that, is to accept a props parameter

62
00:03:14,670 --> 00:03:17,220
‫here in this component.

63
00:03:17,220 --> 00:03:20,400
‫And then for starters, let's just lock this props

64
00:03:20,400 --> 00:03:24,660
‫to the console; and take a look at what's happening.

65
00:03:24,660 --> 00:03:27,903
‫And, we already can see something here.

66
00:03:29,250 --> 00:03:32,670
‫So, this props is basically this object right here;

67
00:03:32,670 --> 00:03:37,533
‫and it has name, then pizza spinach, which is exactly this.

68
00:03:38,520 --> 00:03:42,930
‫So, what happened, as React included this pizza component,

69
00:03:42,930 --> 00:03:45,810
‫it basically called dysfunction in past

70
00:03:45,810 --> 00:03:47,790
‫in this props object.

71
00:03:47,790 --> 00:03:51,600
‫And this props object is made out of these four props

72
00:03:51,600 --> 00:03:54,390
‫that we passed into the component.

73
00:03:54,390 --> 00:03:58,020
‫And so now we can use this props object

74
00:03:58,020 --> 00:04:00,063
‫to replace all of these values here.

75
00:04:01,410 --> 00:04:04,890
‫Now, we need to take these values out of the object;

76
00:04:04,890 --> 00:04:08,670
‫and therefore, we need JavaScript, right?

77
00:04:08,670 --> 00:04:10,860
‫So here, this is no longer a string;

78
00:04:10,860 --> 00:04:13,293
‫but we need to enter JavaScript mode again.

79
00:04:14,190 --> 00:04:18,960
‫So, props dot photo name is this one.

80
00:04:18,960 --> 00:04:21,660
‫And here, it is the name of the pizza.

81
00:04:21,660 --> 00:04:25,770
‫And again, we need JavaScript mode.

82
00:04:25,770 --> 00:04:28,263
‫So, props dot name.

83
00:04:29,670 --> 00:04:31,293
‫The same thing down here.

84
00:04:34,380 --> 00:04:35,853
‫So, props dot name.

85
00:04:37,590 --> 00:04:42,523
‫And finally, down here, we want props dot ingredients.

86
00:04:47,100 --> 00:04:48,930
‫Or actually, it's ingredient.

87
00:04:48,930 --> 00:04:50,280
‫Let's fix that here.

88
00:04:50,280 --> 00:04:53,433
‫Ingredients and ingredients down here.

89
00:04:54,360 --> 00:04:55,260
‫Okay.

90
00:04:55,260 --> 00:04:58,560
‫And of course, now everything still looks the same;

91
00:04:58,560 --> 00:05:00,900
‫because the data that we had here before,

92
00:05:00,900 --> 00:05:03,810
‫is exactly the data that we have here.

93
00:05:03,810 --> 00:05:06,753
‫But now let's actually make some magic happen.

94
00:05:08,280 --> 00:05:11,580
‫So, let's create another pizza component;

95
00:05:11,580 --> 00:05:16,580
‫and then, this is where we will see why props are so useful.

96
00:05:17,340 --> 00:05:20,643
‫So let's create a pizza funghi.

97
00:05:22,950 --> 00:05:25,983
‫Let's give it some ingredients.

98
00:05:28,020 --> 00:05:31,890
‫So tomato, let's say also mushrooms.

99
00:05:31,890 --> 00:05:33,540
‫And this is not important here.

100
00:05:33,540 --> 00:05:35,190
‫This is just to show you

101
00:05:35,190 --> 00:05:39,180
‫that we can now fully customize our components.

102
00:05:39,180 --> 00:05:42,180
‫Next, we can define the price.

103
00:05:42,180 --> 00:05:45,330
‫And notice that I'm doing it now in a different order.

104
00:05:45,330 --> 00:05:48,120
‫So here I had first a photo name and the price.

105
00:05:48,120 --> 00:05:49,620
‫And this is just to show you

106
00:05:49,620 --> 00:05:51,990
‫that the order in which we pass in the props

107
00:05:51,990 --> 00:05:53,763
‫is completely irrelevant.

108
00:05:56,610 --> 00:05:58,830
‫So, photo name is pizzas

109
00:05:58,830 --> 00:06:02,073
‫slash funghi dot jpg.

110
00:06:04,470 --> 00:06:07,890
‫Okay? And now we need to immediately close this component

111
00:06:07,890 --> 00:06:09,390
‫just like before.

112
00:06:09,390 --> 00:06:13,350
‫And as I save it, watch what happened here.

113
00:06:13,350 --> 00:06:16,200
‫And there is our second pizza component

114
00:06:16,200 --> 00:06:18,870
‫now with completely different data.

115
00:06:18,870 --> 00:06:22,530
‫And so now for the first time, we have reused a component

116
00:06:22,530 --> 00:06:26,130
‫and configured it in a way that makes each component unique

117
00:06:26,130 --> 00:06:28,770
‫and display their own data.

118
00:06:28,770 --> 00:06:31,410
‫Okay? And now let's just improve

119
00:06:31,410 --> 00:06:34,200
‫this pizza component here a little bit.

120
00:06:34,200 --> 00:06:36,060
‫So for starters,

121
00:06:36,060 --> 00:06:38,883
‫in our CSS, we actually have a class name here.

122
00:06:39,720 --> 00:06:42,423
‫So a class name called pizza.

123
00:06:43,920 --> 00:06:48,300
‫Okay? And then let's also place these two here,

124
00:06:48,300 --> 00:06:49,590
‫inside their own div,

125
00:06:49,590 --> 00:06:53,880
‫so that this data can be displayed at the site of the image.

126
00:06:53,880 --> 00:06:56,580
‫So just like here in our original.

127
00:06:56,580 --> 00:06:58,563
‫So this is what we're going for.

128
00:06:59,430 --> 00:07:03,330
‫So here we have a div,

129
00:07:03,330 --> 00:07:05,550
‫and then again, I'm using that trick

130
00:07:05,550 --> 00:07:07,893
‫where I simply push down that line.

131
00:07:10,080 --> 00:07:12,723
‫And this is already looking a lot nicer.

132
00:07:13,740 --> 00:07:16,560
‫Let's just finally also add the price here

133
00:07:16,560 --> 00:07:18,333
‫and I'm doing that as a span.

134
00:07:20,850 --> 00:07:24,930
‫So props dot price.

135
00:07:24,930 --> 00:07:26,760
‫And there it is.

136
00:07:26,760 --> 00:07:29,850
‫But now let's say that we wanted for some reason

137
00:07:29,850 --> 00:07:31,530
‫to add a number here.

138
00:07:31,530 --> 00:07:35,910
‫So we wanted to increase all the prices by three, let's say.

139
00:07:35,910 --> 00:07:38,883
‫But watch what happens when we try this.

140
00:07:40,110 --> 00:07:42,243
‫So all the prices plus three.

141
00:07:44,010 --> 00:07:46,350
‫So, what happens, is that

142
00:07:46,350 --> 00:07:50,550
‫React, or JavaScript, basically simply added the three here

143
00:07:50,550 --> 00:07:52,710
‫to the end of this number.

144
00:07:52,710 --> 00:07:54,180
‫And the reason for that

145
00:07:54,180 --> 00:07:59,180
‫is that here we pass these numbers actually in as a string.

146
00:07:59,580 --> 00:08:02,850
‫And we can see that also here in this output.

147
00:08:02,850 --> 00:08:05,550
‫So we do not want a string here.

148
00:08:05,550 --> 00:08:07,140
‫Instead, we want a number.

149
00:08:07,140 --> 00:08:08,880
‫And so the way we can achieve that

150
00:08:08,880 --> 00:08:11,610
‫is by entering again, JavaScript mode.

151
00:08:11,610 --> 00:08:15,210
‫And so in JavaScript, this is now an actual number.

152
00:08:15,210 --> 00:08:17,610
‫And so watch what happens.

153
00:08:17,610 --> 00:08:19,950
‫Indeed, now we have 13;

154
00:08:19,950 --> 00:08:22,773
‫which is the 10 we had before, plus three.

155
00:08:24,870 --> 00:08:27,873
‫Okay? Then let's do the same thing here.

156
00:08:29,040 --> 00:08:30,720
‫And that fixes this.

157
00:08:30,720 --> 00:08:32,670
‫So, this is very important to notice

158
00:08:32,670 --> 00:08:34,350
‫that whenever you want to pass in

159
00:08:34,350 --> 00:08:36,360
‫something that is not a string,

160
00:08:36,360 --> 00:08:40,500
‫you just use, again, this JavaScript mode basically.

161
00:08:40,500 --> 00:08:44,340
‫Because, in fact, you can pass in anything as a prop.

162
00:08:44,340 --> 00:08:46,860
‫So it doesn't have to be a string or a number.

163
00:08:46,860 --> 00:08:48,390
‫You can pass in a race

164
00:08:48,390 --> 00:08:52,380
‫or objects or even other React components.

165
00:08:52,380 --> 00:08:55,080
‫So props is really really powerful

166
00:08:55,080 --> 00:08:59,430
‫and really one of the most fundamental things in React.

167
00:08:59,430 --> 00:09:03,540
‫And now to review this concept and to go even a bit further

168
00:09:03,540 --> 00:09:05,733
‫let's move on to the next lecture.