1
00:00:00,180 --> 00:00:06,750
Amazing job now that we know that we can access JavaScript in our sex course.

2
00:00:06,880 --> 00:00:11,530
Let's take a look at the props and why I would want to props.

3
00:00:11,970 --> 00:00:19,020
Well, even though I could set these ones up as variables, I can pass them one.

4
00:00:19,020 --> 00:00:22,320
I'll copy and paste the book, essentially one.

5
00:00:22,320 --> 00:00:24,930
I'll have multiple instances of the book.

6
00:00:25,320 --> 00:00:29,210
At the end of the day, they will still display the same result.

7
00:00:29,730 --> 00:00:38,750
So now I want to take a look at how we can change these values here depending on whatever we are passing.

8
00:00:38,760 --> 00:00:44,930
And now I'll start by moving all my variables right after the USS.

9
00:00:45,900 --> 00:00:53,850
So we'll say here, set up Varsh and then I'll do the same thing for the title, so I'll pass it over

10
00:00:53,850 --> 00:00:54,180
here.

11
00:00:54,420 --> 00:00:55,060
And you know what?

12
00:00:55,080 --> 00:01:03,660
I'll do the exact same thing with an image so called this CONSED and then I M.G. And that will be equal

13
00:01:03,870 --> 00:01:06,380
to whatever value I have over here.

14
00:01:06,660 --> 00:01:12,840
Now I'll write a copy of a string because it's going to be easier to copy and paste.

15
00:01:12,840 --> 00:01:20,940
I have author title image and of course where I have the source again, I go back to Joska plant and

16
00:01:20,940 --> 00:01:29,820
what is the variable name that is I am G so once I it nothing Breck's which is beautiful, then I'll

17
00:01:29,820 --> 00:01:33,170
remove some of the stuff that we added in the last video.

18
00:01:33,720 --> 00:01:36,330
I don't think it is necessary over here.

19
00:01:36,840 --> 00:01:40,000
And let's remove both of these things as well.

20
00:01:40,410 --> 00:01:43,430
So now we go back to our standard setup.

21
00:01:43,980 --> 00:01:45,420
So once this is done.

22
00:01:46,520 --> 00:01:51,890
Well, how we can pass something unique or here, because, like I said, I copy and paste.

23
00:01:52,280 --> 00:01:53,620
Yeah, it works really well.

24
00:01:54,020 --> 00:02:02,210
We get the same instance and everything is beautiful, but the values don't change while a book is a

25
00:02:02,210 --> 00:02:02,780
function.

26
00:02:03,200 --> 00:02:03,680
Correct.

27
00:02:04,340 --> 00:02:07,640
Now, what do we know about functions in JavaScript?

28
00:02:08,330 --> 00:02:12,620
Well, we know that there are parameters and there are arguments.

29
00:02:13,050 --> 00:02:19,030
So I would have a simple function if I set up some kind of parameter, for example, name, and then

30
00:02:19,040 --> 00:02:23,430
if I pass them and of course I can use it in my function.

31
00:02:23,960 --> 00:02:27,140
So can we do the same thing in here?

32
00:02:27,590 --> 00:02:33,620
Now, let's say and you can probably already guess that I'm suggesting that that most likely will be

33
00:02:33,620 --> 00:02:35,390
able to do that otherwise.

34
00:02:35,810 --> 00:02:39,290
I mean, I would be kind of mean, wouldn't it?

35
00:02:39,710 --> 00:02:45,470
OK, so I have my book component, which is a function now.

36
00:02:45,470 --> 00:02:47,330
Where do we write usually parameters.

37
00:02:47,640 --> 00:02:48,890
It is right here.

38
00:02:48,890 --> 00:02:49,320
Correct.

39
00:02:49,880 --> 00:02:52,820
So let's write a primer name.

40
00:02:53,490 --> 00:02:57,440
Now, I'll write this as a prop because that is a general convention.

41
00:02:57,760 --> 00:03:01,460
It just sounds short for properties that we usually pass in.

42
00:03:01,820 --> 00:03:05,300
However, you can call this shake.

43
00:03:08,680 --> 00:03:14,410
And bake or whatever you want, OK, just keep that in mind and of course, we'll take a look at the

44
00:03:14,410 --> 00:03:16,920
example a little bit later where we call the Shake and Bake.

45
00:03:17,380 --> 00:03:19,130
So we've got our props.

46
00:03:20,020 --> 00:03:25,260
Now, of course, we want to cancel it because I don't want to see, well, what is this value here?

47
00:03:25,570 --> 00:03:27,200
What is this perhaps?

48
00:03:27,610 --> 00:03:29,740
And I can console logon to places.

49
00:03:29,740 --> 00:03:36,340
I can do it above the return and I can just say just make sure that the name is exactly the same.

50
00:03:36,670 --> 00:03:40,660
So if you're trying to test that out, that you can call this whatever you want.

51
00:03:40,690 --> 00:03:45,720
So if you're out here, bananas, don't cancel our props, cancel like bananas.

52
00:03:46,030 --> 00:03:47,770
And also I can do the same thing here.

53
00:03:47,770 --> 00:03:48,210
Correct.

54
00:03:48,460 --> 00:03:56,410
Because remember, in the dress, we could cancel log, meaning we can go back to just one in here.

55
00:03:56,440 --> 00:03:57,250
All right.

56
00:03:57,250 --> 00:03:59,110
Props as well.

57
00:03:59,470 --> 00:04:06,300
And we'll notice something interesting where if I inspect in my console, I have object, object, object.

58
00:04:07,270 --> 00:04:08,920
OK, what's happening here?

59
00:04:09,400 --> 00:04:12,580
Well, there is an object now.

60
00:04:12,580 --> 00:04:18,490
The cool thing now is that, of course, I can access that object.

61
00:04:19,210 --> 00:04:24,030
But obviously the next question is how can I pass something in here?

62
00:04:24,460 --> 00:04:25,630
I do have the object.

63
00:04:25,640 --> 00:04:27,490
That's why you can see that we can name it.

64
00:04:27,490 --> 00:04:29,770
Whatever you want can be bananas.

65
00:04:29,770 --> 00:04:31,420
It can be shake and bake, whatever.

66
00:04:31,870 --> 00:04:33,830
At the end of the day, it's always going to be an object.

67
00:04:33,830 --> 00:04:36,240
However, convention is using props.

68
00:04:36,610 --> 00:04:41,770
So unless you want to be a real rebel, I would suggest sticking to that convention.

69
00:04:42,010 --> 00:04:42,580
And you're not.

70
00:04:42,580 --> 00:04:48,430
I think there's too many consumer locks at this point, but beautifully we can see that it is an object

71
00:04:48,730 --> 00:04:49,000
now.

72
00:04:49,690 --> 00:04:55,870
Well, in order to pass this in, we need to go back to where we are rendering the book.

73
00:04:56,380 --> 00:05:00,820
So not where we're setting up here will accept her, where we render the book.

74
00:05:01,130 --> 00:05:02,860
This is where we need to pass it.

75
00:05:03,250 --> 00:05:08,660
And the way we pass it, we have a prop name and then whatever value.

76
00:05:09,160 --> 00:05:18,010
So if I'm going to go here with a random prop name of job and if I set this up as a value of developer,

77
00:05:18,370 --> 00:05:24,850
you'll notice that now when we cancel log, we have a job and then we have a developer.

78
00:05:25,550 --> 00:05:26,150
So that's it.

79
00:05:26,350 --> 00:05:26,820
Awesome.

80
00:05:27,130 --> 00:05:29,610
Now, of course, we can access those values.

81
00:05:29,890 --> 00:05:33,690
Now, a few things that we can notice here for the second book.

82
00:05:33,700 --> 00:05:36,180
I'm still logging the props.

83
00:05:36,190 --> 00:05:40,180
However, I didn't pass anything correct in here.

84
00:05:40,360 --> 00:05:42,670
Of course, I have the job with the value.

85
00:05:42,970 --> 00:05:47,680
However, in here I just have the empty object.

86
00:05:48,070 --> 00:05:53,160
That's why the second console log essentially is just an empty object because I didn't pass him.

87
00:05:53,650 --> 00:05:54,950
Can we pass something in here?

88
00:05:54,960 --> 00:06:00,190
I can say title and I'll call this a random title line.

89
00:06:00,190 --> 00:06:03,730
Can we pass, for example, a number?

90
00:06:03,850 --> 00:06:12,400
Yeah, I could go with number or price or whatever, and I can just say simply over here that the value

91
00:06:12,640 --> 00:06:14,650
will be equal to something.

92
00:06:14,800 --> 00:06:23,950
Again, I go back to your script because this is still just for the time being, I'll just pass in 22.

93
00:06:24,370 --> 00:06:28,870
So now notice for the first one I have job and developer.

94
00:06:29,020 --> 00:06:32,750
That is the property and the value in my object here.

95
00:06:32,810 --> 00:06:35,830
For the second one, I have a tile property.

96
00:06:36,670 --> 00:06:44,460
The value is a random title and in here I passed and a number of property with a value of twenty two.

97
00:06:44,740 --> 00:06:50,680
So what I'm trying to say as far as the value, same as with JavaScript, we can pass the values here

98
00:06:50,920 --> 00:06:51,740
in the property.

99
00:06:52,330 --> 00:06:56,170
Now the next question of course is not how we can access them.

100
00:06:56,950 --> 00:06:58,920
If there's multiple ways how we can do that.

101
00:06:58,930 --> 00:07:02,020
That's why we'll split this up in multiple videos.

102
00:07:02,020 --> 00:07:08,320
But the most basic one would be using the same name that used over here.

103
00:07:08,680 --> 00:07:13,430
So, again, if I could shake and bake, I'll still be able to do it.

104
00:07:13,690 --> 00:07:14,500
Keep that in mind.

105
00:07:14,860 --> 00:07:17,050
But you use the same name.

106
00:07:17,500 --> 00:07:23,650
And now, of course, we are just accessing those properties, just like in a regular react.

107
00:07:24,010 --> 00:07:28,930
Now, I did not pass my correct values as far as author, title and image.

108
00:07:29,270 --> 00:07:32,990
So for the time being, I'll just create two paragraphs.

109
00:07:33,010 --> 00:07:35,910
Well, I'll show you how I can access those values.

110
00:07:36,280 --> 00:07:44,620
So in here I'll say that I'm looking for props and learn a job and then we'll see two things.

111
00:07:44,920 --> 00:07:48,160
We'll see that for the first value, we do have the developer.

112
00:07:48,520 --> 00:07:50,020
So that is correct.

113
00:07:50,410 --> 00:07:52,270
But then for the second one, we have nothing.

114
00:07:52,420 --> 00:07:53,470
Now, why is that happening?

115
00:07:53,830 --> 00:07:59,330
Well, because I did not pass the prop by the name of job for a second.

116
00:07:59,710 --> 00:08:03,890
So that is what is going to happen when the prop is not there.

117
00:08:04,270 --> 00:08:05,560
So if the prop is not there.

118
00:08:06,630 --> 00:08:10,240
It just won't be displayed, however, in this case.

119
00:08:10,260 --> 00:08:16,680
I have the title for the second one, right, so I can copy and paste and again, I'm looking for props

120
00:08:16,680 --> 00:08:17,840
and then battle.

121
00:08:18,180 --> 00:08:22,740
So now, of course, this will be displayed on the second one, but not on the first one.

122
00:08:23,400 --> 00:08:28,500
So hopefully this makes sense where when you're setting up a list, of course, you need to make sure

123
00:08:28,800 --> 00:08:37,950
that the props that you're passing actually matched to whatever you're looking in the component.

124
00:08:38,430 --> 00:08:38,830
Correct.

125
00:08:39,210 --> 00:08:44,640
So if, for example, in a component I'm looking for a job and make sure that all your instances have

126
00:08:44,640 --> 00:08:51,040
that job, because if that value won't be there, well, you just want displayed on the last one.

127
00:08:51,060 --> 00:08:52,590
Let's go with paragraph here.

128
00:08:52,830 --> 00:08:55,140
And again, we'll look for props.

129
00:08:55,530 --> 00:08:58,110
And then what was the property that I was looking for?

130
00:08:58,270 --> 00:09:03,120
Not, of course, the no, no, of course I'm passing in the number and there it is.

131
00:09:03,370 --> 00:09:09,990
That's how we can start making these values more dynamic, as you can see, because we're accessing

132
00:09:10,260 --> 00:09:12,560
the props and line.

133
00:09:12,570 --> 00:09:17,640
Of course, when we are rendering the book, we pass it in again.

134
00:09:17,670 --> 00:09:21,240
We have a problem and then the value.

135
00:09:21,960 --> 00:09:31,710
And now as I'm looking at my values over here, can we set this up as two separate objects where essentially

136
00:09:31,710 --> 00:09:38,880
what I could do is for the first book, pass the property values from the first object, where, of

137
00:09:38,880 --> 00:09:44,670
course, I'm going to have my image, my author and title, and then of course, we'll do the same thing

138
00:09:44,970 --> 00:09:45,990
for a different book.

139
00:09:46,860 --> 00:09:54,480
Now, let me look for a short name, I think I'm going to use this one because I just don't want to

140
00:09:54,480 --> 00:09:57,560
copy too long of a name.

141
00:09:58,020 --> 00:09:58,820
So let's do that.

142
00:09:59,130 --> 00:10:05,790
Let's refactor these three values into a object and let's call this first book.

143
00:10:05,790 --> 00:10:11,480
So consed first book that will be equal to our object.

144
00:10:11,670 --> 00:10:14,490
And then again we have a bunch of properties.

145
00:10:14,760 --> 00:10:18,660
I'll start with an image and I'll just take these values.

146
00:10:19,050 --> 00:10:19,880
So cut it out.

147
00:10:20,080 --> 00:10:21,750
Copy and paste then.

148
00:10:21,750 --> 00:10:30,360
What else we have because we have the title so we're going to go with title property and what is the

149
00:10:30,360 --> 00:10:33,120
value areas of this one over here.

150
00:10:33,630 --> 00:10:36,650
And then we have the last one of the author.

151
00:10:37,200 --> 00:10:38,580
So we go with author.

152
00:10:39,370 --> 00:10:46,550
And also this equal to whatever value I had, and now, of course, I would want to access them.

153
00:10:47,020 --> 00:10:54,130
Now, keep in mind, we could have access this as a straight up variables like I just had them before.

154
00:10:54,340 --> 00:10:59,680
The only difference right now is going to be that, of course, I'll set up proper props.

155
00:11:00,460 --> 00:11:04,620
So in here, let's start with IMG.

156
00:11:04,810 --> 00:11:12,580
So that's my IMG prop and that will be equal to first book because that of course is my object name

157
00:11:12,730 --> 00:11:15,810
and then property value is IMG.

158
00:11:16,210 --> 00:11:20,770
And then where I'm accessing the property right now, I'm not going to be looking for a job title.

159
00:11:20,770 --> 00:11:22,900
No, since I will remove them.

160
00:11:22,900 --> 00:11:30,820
However, for image I'm going to go for props and then I'm looking for the I am G.

161
00:11:31,270 --> 00:11:37,510
So now of course again I'm grabbing whatever I have in the first book and I would need to do the same

162
00:11:37,510 --> 00:11:38,640
thing for a title.

163
00:11:38,740 --> 00:11:41,490
So again, the problem is title.

164
00:11:41,800 --> 00:11:48,400
Again, we're going back to a Joska plant and in here I'm accessing first book and then I'm looking

165
00:11:48,400 --> 00:11:49,210
for the title.

166
00:11:49,720 --> 00:11:53,770
So I'll say first book and then title again.

167
00:11:53,770 --> 00:11:57,220
Let me emphasize something where it doesn't have to be an object.

168
00:11:57,670 --> 00:11:59,890
We could have just access the properties.

169
00:12:00,100 --> 00:12:05,470
But since I would want to set up two of them to object, since I would want to have two different values.

170
00:12:05,680 --> 00:12:08,350
That's why, of course, I set it up as a object.

171
00:12:08,600 --> 00:12:10,460
The last one was the author.

172
00:12:10,570 --> 00:12:17,080
Again, we have the prop name, which is an author, and then we look in the first book and then the

173
00:12:17,080 --> 00:12:19,320
property we're looking for is the author.

174
00:12:19,570 --> 00:12:21,700
So now of course, I can remove these ones.

175
00:12:21,940 --> 00:12:29,280
They were just for testing purposes and then just replace place where I have the props for title and

176
00:12:29,290 --> 00:12:30,760
then where I have the author.

177
00:12:30,940 --> 00:12:32,380
I'm looking for the author.

178
00:12:32,680 --> 00:12:34,690
Now, the problem right now is going to be the.

179
00:12:34,730 --> 00:12:36,460
Yeah, the first one.

180
00:12:37,320 --> 00:12:42,640
He has displayed nicely, however, for the second one notice, I'm just passing in some random.

181
00:12:43,410 --> 00:12:48,840
So like I was saying, yeah, we can pass whatever props you would want, but keep in mind that if in

182
00:12:48,840 --> 00:12:53,670
the component you're not looking for them, while nothing is going to happen, you can pass all day

183
00:12:53,670 --> 00:12:55,840
long, but nothing is going to be around that.

184
00:12:55,860 --> 00:13:03,420
However, if the component is looking for specific prop and you're not passing notice, I cannot see

185
00:13:03,420 --> 00:13:03,840
the image.

186
00:13:03,870 --> 00:13:09,530
So what we would need to do, well, eventually we'll set up a list and will iterate over list.

187
00:13:09,660 --> 00:13:11,120
Now, all that is coming up.

188
00:13:11,130 --> 00:13:17,310
But for the time being, what I would want is just copy and paste and then we'll write a second book.

189
00:13:17,580 --> 00:13:19,470
Now, why am I setting up a second book?

190
00:13:19,470 --> 00:13:23,240
Because now, of course, I would want change of those values.

191
00:13:23,640 --> 00:13:28,440
So in here, I'm going to go for copy address and will replace it.

192
00:13:29,340 --> 00:13:30,460
We're going to copy and paste.

193
00:13:30,480 --> 00:13:36,310
So this is going to be a different image than, of course, I would want also get my name.

194
00:13:36,780 --> 00:13:40,070
So let me see now, of course, this navigates here.

195
00:13:40,080 --> 00:13:45,890
So I guess I can just copy and paste from here, like so.

196
00:13:46,160 --> 00:13:47,520
So let's now get back.

197
00:13:48,120 --> 00:13:50,430
We're going to go with a different value here.

198
00:13:50,760 --> 00:13:54,170
And of course, I also want to get a author.

199
00:13:54,840 --> 00:13:59,580
So let me somehow copy and paste, copy and paste the author.

200
00:14:00,390 --> 00:14:01,370
And there it is.

201
00:14:01,650 --> 00:14:03,170
Now we have this value.

202
00:14:03,600 --> 00:14:08,800
So what we need to do right now for the second book is past these values as well.

203
00:14:09,360 --> 00:14:13,490
But remember, of course, now I'm looking for the second object.

204
00:14:13,650 --> 00:14:19,320
Now, I could technically look for the first one, but it's somewhat it doesn't make sense since I wouldn't

205
00:14:19,320 --> 00:14:20,220
want to repeat that.

206
00:14:20,460 --> 00:14:25,110
So I'm going to go with HMG and I will be equal to a second book.

207
00:14:25,260 --> 00:14:27,360
And then again, I'm looking for AMG property.

208
00:14:27,690 --> 00:14:33,600
Then the same goes for the title where I'm looking for title and then I'm looking for second book and

209
00:14:33,600 --> 00:14:35,130
then the title on the last one.

210
00:14:35,490 --> 00:14:40,680
Of course, you can probably already guess we have the author and then we're looking for second book

211
00:14:40,980 --> 00:14:42,690
and then the author.

212
00:14:42,960 --> 00:14:46,290
And once I pass in these values, not on this.

213
00:14:47,240 --> 00:14:54,170
I have my first instance that is beautiful and I have the second instance where I'm getting those unique

214
00:14:54,170 --> 00:15:03,230
flowers so we can already see how nicely we can start creating these lists where, yes, they all will

215
00:15:03,230 --> 00:15:08,810
be displayed the same way, because we made sure that when we were setting up our component.

216
00:15:08,810 --> 00:15:16,310
However, because we have something called, perhaps we can start passing in unique values where we

217
00:15:16,310 --> 00:15:22,690
have a problem and either we can hard code here like we did in the beginning with the string, either

218
00:15:22,710 --> 00:15:29,900
we can set up a variable or we can set up objects or arrays or whatever and then pass it as a value

219
00:15:29,900 --> 00:15:30,560
here as well.

220
00:15:30,710 --> 00:15:37,130
Since when we set up currently versus we're going back to a couple of rules.

221
00:15:37,130 --> 00:15:42,470
We can call it whatever we want, but convention is calling it prompts one way.

222
00:15:42,470 --> 00:15:46,580
How to access it is just by looking in the object that we're getting.

223
00:15:46,830 --> 00:15:51,160
So we go with props and then whatever name of the problem.

224
00:15:51,470 --> 00:15:58,790
And the last thing is that if you pass in some prop that you're not looking in a component, nothing

225
00:15:58,790 --> 00:15:59,330
will happen.

226
00:15:59,540 --> 00:16:05,750
But if the component is looking for a prop that you're not passing in, essentially you'll just have

227
00:16:05,750 --> 00:16:11,780
the empty space science component is going to be looking for the prop, but the value will be undefined.