1
00:00:01,200 --> 00:00:03,480
‫Okay, so let's now make

2
00:00:03,480 --> 00:00:06,840
‫our component really flexible and reusable

3
00:00:06,840 --> 00:00:11,703
‫by defining a nice public API for consumers to use it.

4
00:00:13,410 --> 00:00:17,970
‫So right now, our component is quite unflexible

5
00:00:17,970 --> 00:00:20,820
‫and, therefore, not really reusable.

6
00:00:20,820 --> 00:00:23,070
‫So, it might maybe be useful

7
00:00:23,070 --> 00:00:25,200
‫in one very specific case

8
00:00:25,200 --> 00:00:28,440
‫where we want the component to look and behave

9
00:00:28,440 --> 00:00:31,770
‫exactly like this, but it won't be useful

10
00:00:31,770 --> 00:00:34,650
‫for many other consumers.

11
00:00:34,650 --> 00:00:38,250
‫So, if we imagine that we want to reuse this component

12
00:00:38,250 --> 00:00:40,380
‫in many other applications,

13
00:00:40,380 --> 00:00:44,160
‫or maybe even publish it to NPM to share it

14
00:00:44,160 --> 00:00:47,100
‫with all React developers around the world,

15
00:00:47,100 --> 00:00:50,010
‫then they will probably not find this component

16
00:00:50,010 --> 00:00:52,020
‫very useful right now.

17
00:00:52,020 --> 00:00:56,190
‫So those developers, or in other words, those consumers,

18
00:00:56,190 --> 00:00:59,340
‫they will probably want to define things like

19
00:00:59,340 --> 00:01:01,650
‫the colors of these stars

20
00:01:01,650 --> 00:01:05,640
‫or maybe the sizes of the stars and the text

21
00:01:05,640 --> 00:01:08,640
‫in order to basically make this component fit

22
00:01:08,640 --> 00:01:10,530
‫into their own applications.

23
00:01:10,530 --> 00:01:13,770
‫And so, what we're gonna do now is to try to define

24
00:01:13,770 --> 00:01:16,890
‫a good public API for this component

25
00:01:16,890 --> 00:01:18,750
‫just as we learned before.

26
00:01:18,750 --> 00:01:22,800
‫And so, by doing that, we will try to find that balance

27
00:01:22,800 --> 00:01:26,940
‫of using too few props and using too little props

28
00:01:26,940 --> 00:01:30,723
‫so that the component also doesn't get way too complex.

29
00:01:31,740 --> 00:01:35,070
‫So, let's get to work, and let's actually start

30
00:01:35,070 --> 00:01:38,400
‫with those two simple things that I just mentioned,

31
00:01:38,400 --> 00:01:40,773
‫so the color and the size.

32
00:01:41,820 --> 00:01:44,490
‫So, let's just write it here,

33
00:01:44,490 --> 00:01:45,750
‫color

34
00:01:45,750 --> 00:01:47,490
‫and size.

35
00:01:47,490 --> 00:01:50,070
‫And as I mentioned also in the last lecture,

36
00:01:50,070 --> 00:01:53,043
‫it's a good idea to provide default values.

37
00:01:54,090 --> 00:01:56,400
‫So, we already learned that we can do that

38
00:01:56,400 --> 00:02:00,450
‫by providing the default values during destructuring.

39
00:02:00,450 --> 00:02:03,420
‫So, just like we did with the max rating.

40
00:02:03,420 --> 00:02:05,580
‫And so, let's say that our default color

41
00:02:05,580 --> 00:02:08,463
‫will be this yellow of fcc419,

42
00:02:10,950 --> 00:02:12,690
‫and the default size,

43
00:02:12,690 --> 00:02:15,843
‫let's make it the number of 48.

44
00:02:18,000 --> 00:02:23,000
‫Okay, and now, let's use these props in our component,

45
00:02:23,370 --> 00:02:27,720
‫so, to basically accept the color and then change the stars

46
00:02:27,720 --> 00:02:30,240
‫and the text to fit that color.

47
00:02:30,240 --> 00:02:31,953
‫And the same for the size.

48
00:02:34,320 --> 00:02:36,510
‫So, I want to start with the text.

49
00:02:36,510 --> 00:02:41,160
‫And so, now I actually need to take this object here

50
00:02:41,160 --> 00:02:44,790
‫back into the component because now we will specify

51
00:02:44,790 --> 00:02:49,080
‫some properties which will depend on the props.

52
00:02:49,080 --> 00:02:51,930
‫And so the props are, of course, only accessible

53
00:02:51,930 --> 00:02:53,580
‫inside the component.

54
00:02:53,580 --> 00:02:56,250
‫So, then this object will have to live

55
00:02:56,250 --> 00:02:57,873
‫inside the component as well.

56
00:03:00,210 --> 00:03:04,650
‫So, the color property will be set to color,

57
00:03:04,650 --> 00:03:07,590
‫and so, we can actually just do it like this.

58
00:03:07,590 --> 00:03:09,390
‫And if we give this to save,

59
00:03:09,390 --> 00:03:13,113
‫then you see the text does indeed turn yellow.

60
00:03:14,130 --> 00:03:16,410
‫Now, it might be a bit small,

61
00:03:16,410 --> 00:03:18,753
‫and so, let's now also use the size,

62
00:03:22,320 --> 00:03:24,960
‫and so, let's use a template literal

63
00:03:24,960 --> 00:03:28,470
‫and then use the size that we received as a prop

64
00:03:28,470 --> 00:03:30,453
‫and set the pixels to that.

65
00:03:31,680 --> 00:03:34,620
‫Well, that's (laughs) maybe a bit too large.

66
00:03:34,620 --> 00:03:39,420
‫Let's try to divide this, for example, by 1.5

67
00:03:39,420 --> 00:03:41,073
‫and that looks a bit nicer.

68
00:03:42,270 --> 00:03:43,200
‫All right?

69
00:03:43,200 --> 00:03:46,170
‫And now we should also use these values here,

70
00:03:46,170 --> 00:03:48,543
‫of course, for the stars themselves.

71
00:03:50,580 --> 00:03:55,580
‫So, to do that, we will also now place this style object

72
00:03:55,980 --> 00:03:58,860
‫inside the star, and then we need

73
00:03:58,860 --> 00:04:01,710
‫these values also here.

74
00:04:01,710 --> 00:04:04,140
‫So, the color and the

75
00:04:04,140 --> 00:04:07,260
‫size, and so, of course, then we need to pass them

76
00:04:07,260 --> 00:04:08,703
‫in here as props.

77
00:04:09,630 --> 00:04:10,770
‫So color

78
00:04:10,770 --> 00:04:12,090
‫and color

79
00:04:12,090 --> 00:04:12,970
‫and size

80
00:04:13,980 --> 00:04:15,423
‫and size.

81
00:04:16,440 --> 00:04:17,823
‫And so, then here, we can,

82
00:04:19,620 --> 00:04:21,663
‫again, create a template literal,

83
00:04:23,220 --> 00:04:26,700
‫get the size, and then pixels.

84
00:04:26,700 --> 00:04:28,863
‫Let's do the same for the height.

85
00:04:32,340 --> 00:04:34,410
‫And here, nothing changed because

86
00:04:34,410 --> 00:04:36,873
‫we already had 48 here,

87
00:04:38,370 --> 00:04:41,670
‫and now finally, the color is actually defined

88
00:04:41,670 --> 00:04:43,683
‫right in the svgelements.

89
00:04:44,750 --> 00:04:47,670
‫So here, we have to fill and a stroke of black,

90
00:04:47,670 --> 00:04:50,763
‫which is the reason why these are currently black.

91
00:04:51,990 --> 00:04:53,493
‫But if we change that here,

92
00:04:55,320 --> 00:04:56,343
‫like this,

93
00:04:58,080 --> 00:04:59,133
‫so color,

94
00:05:03,450 --> 00:05:05,673
‫then you see that they just turned yellow.

95
00:05:06,930 --> 00:05:10,350
‫Now, of course, this other one isn't yellow yet

96
00:05:10,350 --> 00:05:13,350
‫because, well, it is still at black,

97
00:05:13,350 --> 00:05:15,050
‫so let's change that here as well.

98
00:05:17,790 --> 00:05:19,260
‫Okay,

99
00:05:19,260 --> 00:05:20,163
‫beautiful.

100
00:05:21,120 --> 00:05:23,943
‫So, that's already a lot nicer than before.

101
00:05:24,930 --> 00:05:28,173
‫Let's just call another component here,

102
00:05:33,150 --> 00:05:34,770
‫and let's define

103
00:05:34,770 --> 00:05:35,940
‫some other size here.

104
00:05:35,940 --> 00:05:37,233
‫Let's say 24.

105
00:05:38,550 --> 00:05:40,710
‫And so here we have a much smaller component

106
00:05:40,710 --> 00:05:43,440
‫but which still works in the same way.

107
00:05:43,440 --> 00:05:46,950
‫And, of course, we can also specify the color,

108
00:05:46,950 --> 00:05:47,853
‫let's say red,

109
00:05:48,900 --> 00:05:51,360
‫and so, with this we just made our component

110
00:05:51,360 --> 00:05:53,070
‫a lot more flexible.

111
00:05:53,070 --> 00:05:56,580
‫So, if someone wants to use this component in an application

112
00:05:56,580 --> 00:05:58,560
‫where the main color is red,

113
00:05:58,560 --> 00:06:02,910
‫then they can now easily change all of this to red.

114
00:06:02,910 --> 00:06:06,693
‫Now, sometimes consumers or users of the component

115
00:06:06,693 --> 00:06:10,680
‫want to have even more control over the styling.

116
00:06:10,680 --> 00:06:13,740
‫So, sometimes it's a good idea to allow users

117
00:06:13,740 --> 00:06:15,843
‫to pass in a class name.

118
00:06:18,960 --> 00:06:22,830
‫So, for example, a class name with the name of test,

119
00:06:22,830 --> 00:06:24,270
‫just in this case,

120
00:06:24,270 --> 00:06:28,320
‫which will then come from some CSS file in the application

121
00:06:28,320 --> 00:06:31,410
‫where this component is being used.

122
00:06:31,410 --> 00:06:34,530
‫So right now, we don't have any class like this,

123
00:06:34,530 --> 00:06:37,563
‫but this is just really for testing purposes.

124
00:06:39,780 --> 00:06:41,440
‫So, then here, we need to

125
00:06:42,450 --> 00:06:44,223
‫accept the class name,

126
00:06:47,250 --> 00:06:50,610
‫and by default, it will just be an empty class name,

127
00:06:50,610 --> 00:06:53,613
‫and then, we just edit here to the overall container.

128
00:06:55,782 --> 00:06:56,710
‫So class name

129
00:06:57,750 --> 00:07:00,720
‫and then, class name like this.

130
00:07:00,720 --> 00:07:03,780
‫So, for example, if the user wants to somehow change

131
00:07:03,780 --> 00:07:07,260
‫the font style, they can do that right inside

132
00:07:07,260 --> 00:07:09,300
‫this class name that they pass in,

133
00:07:09,300 --> 00:07:12,210
‫and so, that class name will then be added here.

134
00:07:12,210 --> 00:07:16,113
‫It will then change the font family of our component.

135
00:07:16,980 --> 00:07:20,100
‫Now, another thing that I sometimes see on the web

136
00:07:20,100 --> 00:07:22,380
‫when we have a component like this

137
00:07:22,380 --> 00:07:26,070
‫is that instead of just displaying the rating number,

138
00:07:26,070 --> 00:07:28,710
‫is that they display, like, some message

139
00:07:28,710 --> 00:07:30,183
‫according to the rating.

140
00:07:31,770 --> 00:07:35,133
‫So, in order to do that, we could pass in an array,

141
00:07:36,030 --> 00:07:38,130
‫and let's actually do that here.

142
00:07:38,130 --> 00:07:40,983
‫So, we could pass in an array of messages,

143
00:07:43,200 --> 00:07:44,830
‫for example saying

144
00:07:46,230 --> 00:07:49,230
‫that the first value is terrible,

145
00:07:49,230 --> 00:07:51,060
‫the second one is

146
00:07:51,060 --> 00:07:51,893
‫bad.

147
00:07:53,190 --> 00:07:54,513
‫Then we have, okay,

148
00:07:55,800 --> 00:07:56,633
‫good,

149
00:07:57,840 --> 00:08:01,653
‫well, as a string, and then amazing.

150
00:08:03,180 --> 00:08:06,510
‫And so, now we can display these five values here,

151
00:08:06,510 --> 00:08:09,540
‫so these strings, instead of the numbers.

152
00:08:09,540 --> 00:08:11,220
‫So that's another nice touch

153
00:08:11,220 --> 00:08:13,353
‫that we can give our component here.

154
00:08:16,440 --> 00:08:18,543
‫So then we accept that prop here,

155
00:08:19,470 --> 00:08:22,170
‫and by default, let's make it an empty array.

156
00:08:22,170 --> 00:08:26,400
‫So really, really important to always give default values.

157
00:08:26,400 --> 00:08:30,930
‫And so, now here, we can use those values.

158
00:08:30,930 --> 00:08:35,400
‫However, we want, of course, to only use that messages array

159
00:08:35,400 --> 00:08:39,090
‫in case that there actually are some elements in there.

160
00:08:39,090 --> 00:08:42,720
‫And also the number of elements should be correct.

161
00:08:42,720 --> 00:08:46,110
‫So, for example, if we allow for a rating

162
00:08:46,110 --> 00:08:49,830
‫between one and five, but then we only have three elements

163
00:08:49,830 --> 00:08:53,040
‫in the array, then that doesn't make a lot of sense.

164
00:08:53,040 --> 00:08:54,420
‫So, this wouldn't work.

165
00:08:54,420 --> 00:08:56,460
‫And so, here, what we can do

166
00:08:56,460 --> 00:09:01,460
‫is to just check if messages.length

167
00:09:01,800 --> 00:09:05,310
‫is equal to the maxRating.

168
00:09:05,310 --> 00:09:07,980
‫And if that is the case, then that means

169
00:09:07,980 --> 00:09:10,593
‫that a messages array was passed in.

170
00:09:12,210 --> 00:09:15,570
‫And if not, then we just do exactly what we had before.

171
00:09:15,570 --> 00:09:19,680
‫But in this case, let's then just display the messages

172
00:09:19,680 --> 00:09:20,830
‫at position

173
00:09:22,560 --> 00:09:25,080
‫rating-1

174
00:09:25,080 --> 00:09:28,920
‫in order to convert back to zero-based index.

175
00:09:28,920 --> 00:09:33,000
‫And of course, we should also consider the temporary rating.

176
00:09:33,000 --> 00:09:35,850
‫So let's actually just copy what we have here,

177
00:09:35,850 --> 00:09:38,193
‫or maybe not, (laughs) okay.

178
00:09:39,120 --> 00:09:40,503
‫It's not that similar.

179
00:09:41,730 --> 00:09:44,130
‫So let's come here and say

180
00:09:44,130 --> 00:09:46,220
‫if there is a tempRating,

181
00:09:47,160 --> 00:09:48,070
‫then use

182
00:09:49,777 --> 00:09:52,530
‫tempRating-1,

183
00:09:52,530 --> 00:09:56,013
‫and if not, then just use the regular rating, -1.

184
00:09:57,000 --> 00:09:59,490
‫So again, if this looks confusing,

185
00:09:59,490 --> 00:10:01,650
‫then just make sure to pause the video

186
00:10:01,650 --> 00:10:05,100
‫and analyze that code, but this is just normal JavaScript

187
00:10:05,100 --> 00:10:05,973
‫at this point.

188
00:10:06,810 --> 00:10:10,470
‫But anyway, as you see, this works great now.

189
00:10:10,470 --> 00:10:13,380
‫So, one star means terrible, bad,

190
00:10:13,380 --> 00:10:15,510
‫then it starts to become, okay, good,

191
00:10:15,510 --> 00:10:17,850
‫and finally amazing.

192
00:10:17,850 --> 00:10:19,740
‫And, of course, it also works

193
00:10:19,740 --> 00:10:22,440
‫with the not temporary rating,

194
00:10:22,440 --> 00:10:24,090
‫so at the fixed rating.

195
00:10:24,090 --> 00:10:25,950
‫While here at this other component

196
00:10:25,950 --> 00:10:28,623
‫where the messages array is empty,

197
00:10:29,610 --> 00:10:31,380
‫so that's the default here,

198
00:10:31,380 --> 00:10:33,420
‫so here it's empty, and so, therefore,

199
00:10:33,420 --> 00:10:36,123
‫we are still displaying just the number.

200
00:10:37,050 --> 00:10:40,230
‫Great, and let's keep going because there is still

201
00:10:40,230 --> 00:10:42,750
‫at least one important thing missing

202
00:10:42,750 --> 00:10:46,923
‫and that is to allow the consumer to set a default rating.

203
00:10:48,780 --> 00:10:51,363
‫Okay, so that's not very hard.

204
00:10:52,260 --> 00:10:53,850
‫So, let's say, for example,

205
00:10:53,850 --> 00:10:57,453
‫that the user wants to start with a default of three,

206
00:10:59,139 --> 00:11:00,222
‫defaultRating

207
00:11:01,950 --> 00:11:03,243
‫should be three.

208
00:11:04,470 --> 00:11:08,760
‫So, the consumer might want to specify a prop like this.

209
00:11:08,760 --> 00:11:09,730
‫And so, let's now

210
00:11:11,130 --> 00:11:13,320
‫then add that prop here

211
00:11:13,320 --> 00:11:15,870
‫and give it a default value.

212
00:11:15,870 --> 00:11:18,360
‫Now, by default, the rating should be zero,

213
00:11:18,360 --> 00:11:23,100
‫which is exactly why that's what we put here, right?

214
00:11:23,100 --> 00:11:25,110
‫And so, the default rating

215
00:11:25,110 --> 00:11:27,570
‫should be just that, zero.

216
00:11:27,570 --> 00:11:31,170
‫But of course, now we need to use this defaultRating,

217
00:11:31,170 --> 00:11:35,553
‫and we will use it right here instead of that zero.

218
00:11:36,810 --> 00:11:39,900
‫So basically, we will initialize our rating state

219
00:11:39,900 --> 00:11:43,320
‫with whatever default rating comes into the prop.

220
00:11:43,320 --> 00:11:45,510
‫And if that prop is not specified,

221
00:11:45,510 --> 00:11:48,873
‫then that's simply exactly the zero that we had before.

222
00:11:49,800 --> 00:11:54,150
‫Now, maybe you heard or read that we should never initialize

223
00:11:54,150 --> 00:11:56,280
‫state from props.

224
00:11:56,280 --> 00:12:00,360
‫However, this is only true if you want the state variable

225
00:12:00,360 --> 00:12:03,810
‫to stay in sync with that passed in props,

226
00:12:03,810 --> 00:12:06,840
‫or in other words, if you want the state value

227
00:12:06,840 --> 00:12:11,840
‫to update in case that the prop value is also updated.

228
00:12:11,850 --> 00:12:15,030
‫However, that is clearly not the case here.

229
00:12:15,030 --> 00:12:18,780
‫So, we are really only using this defaultRating here

230
00:12:18,780 --> 00:12:21,360
‫basically as seed data,

231
00:12:21,360 --> 00:12:24,390
‫so really just as the initial state,

232
00:12:24,390 --> 00:12:27,360
‫and we don't care whether this value here

233
00:12:27,360 --> 00:12:30,570
‫maybe changes somewhere else in the application,

234
00:12:30,570 --> 00:12:32,430
‫so outside this component.

235
00:12:32,430 --> 00:12:36,960
‫And, therefore, this is perfectly fine and normal to do.

236
00:12:36,960 --> 00:12:39,960
‫All right, so it's really no problem to initialize

237
00:12:39,960 --> 00:12:42,630
‫your state based on a prop.

238
00:12:42,630 --> 00:12:44,820
‫So I just wanted to address this point

239
00:12:44,820 --> 00:12:47,940
‫because I could already hear some people complaining

240
00:12:47,940 --> 00:12:49,170
‫about this.

241
00:12:49,170 --> 00:12:52,290
‫So this was more relevant in the old days of React

242
00:12:52,290 --> 00:12:54,600
‫before we had hooks, but now,

243
00:12:54,600 --> 00:12:57,300
‫that's really no longer a problem.

244
00:12:57,300 --> 00:12:59,880
‫But anyway, as we save this now,

245
00:12:59,880 --> 00:13:04,880
‫you see that immediately we see the three ratings,

246
00:13:05,280 --> 00:13:08,760
‫or the three stars, as the default here.

247
00:13:08,760 --> 00:13:12,300
‫And, of course, if this was one or two,

248
00:13:12,300 --> 00:13:14,760
‫then that's what we will see there.

249
00:13:14,760 --> 00:13:17,640
‫And so, again, that's just because we are now using

250
00:13:17,640 --> 00:13:22,640
‫this number two as the initial state value of our rating.

251
00:13:23,010 --> 00:13:26,700
‫All right, and now we could keep going here, of course,

252
00:13:26,700 --> 00:13:29,730
‫and add a lot more different props,

253
00:13:29,730 --> 00:13:33,060
‫so, allowing for a lot more configuration.

254
00:13:33,060 --> 00:13:35,220
‫For example, we could say that

255
00:13:35,220 --> 00:13:39,660
‫we want the colors here to change according to the rating,

256
00:13:39,660 --> 00:13:42,270
‫or we could allow for some different spacing

257
00:13:42,270 --> 00:13:43,890
‫between the stars.

258
00:13:43,890 --> 00:13:47,880
‫We could also allow the consumer to specify on

259
00:13:47,880 --> 00:13:51,240
‫which site this text label here appears.

260
00:13:51,240 --> 00:13:54,000
‫So maybe they want it on the left or at the top

261
00:13:54,000 --> 00:13:55,740
‫or at the bottom here,

262
00:13:55,740 --> 00:13:58,860
‫but that might be going a bit too far here

263
00:13:58,860 --> 00:14:01,290
‫and maybe specifying too many props

264
00:14:01,290 --> 00:14:03,540
‫and adding too much complexity.

265
00:14:03,540 --> 00:14:06,120
‫So I think that what we have here right now

266
00:14:06,120 --> 00:14:09,900
‫is more than enough, except for one important thing

267
00:14:09,900 --> 00:14:12,120
‫that we are still missing right now.

268
00:14:12,120 --> 00:14:15,000
‫And that thing is the fact that the consumer

269
00:14:15,000 --> 00:14:18,180
‫might actually need this rating state

270
00:14:18,180 --> 00:14:21,180
‫outside of this component.

271
00:14:21,180 --> 00:14:25,290
‫And to exemplify this, let's come again back here.

272
00:14:25,290 --> 00:14:28,530
‫And what I want to do now, just temporarily,

273
00:14:28,530 --> 00:14:33,530
‫is to create a new component right here, let's call it Test,

274
00:14:34,350 --> 00:14:35,530
‫and so, this component

275
00:14:36,930 --> 00:14:41,400
‫is, then, the one that will include the star rating.

276
00:14:41,400 --> 00:14:45,360
‫And let's say the color in this case is blue.

277
00:14:45,360 --> 00:14:46,203
‫Why not?

278
00:14:48,420 --> 00:14:51,783
‫And then let's also include that down here.

279
00:14:53,190 --> 00:14:56,523
‫And you will see why I'm doing this in this way in a minute.

280
00:14:58,470 --> 00:15:02,040
‫Now, okay, so here we have another one and the blue one,

281
00:15:02,040 --> 00:15:04,473
‫but now let's say that for some reason,

282
00:15:05,730 --> 00:15:07,440
‫they also really needed

283
00:15:07,440 --> 00:15:10,410
‫to display this rating

284
00:15:10,410 --> 00:15:12,573
‫somewhere in their user interface.

285
00:15:13,500 --> 00:15:16,380
‫So, for example, they might have a paragraph

286
00:15:16,380 --> 00:15:18,367
‫saying, "This movie

287
00:15:18,367 --> 00:15:19,960
‫"was rated

288
00:15:21,937 --> 00:15:23,367
‫"X stars."

289
00:15:25,410 --> 00:15:29,763
‫So, here, that's actually already used a maxRating of 10.

290
00:15:30,690 --> 00:15:34,800
‫And so, now what they want to happen is that whatever rating

291
00:15:34,800 --> 00:15:38,790
‫we specify here should then be displayed right here

292
00:15:38,790 --> 00:15:40,680
‫in the user interface.

293
00:15:40,680 --> 00:15:43,830
‫So, now it should say here that the movie was rated

294
00:15:43,830 --> 00:15:44,913
‫seven stars.

295
00:15:46,350 --> 00:15:48,960
‫So, how will they do this right now?

296
00:15:48,960 --> 00:15:52,200
‫So, they basically need access to the state,

297
00:15:52,200 --> 00:15:56,070
‫so to this rating state that we have inside the component

298
00:15:56,070 --> 00:15:59,523
‫but right here, so inside of the test component.

299
00:16:00,900 --> 00:16:03,543
‫So, what they need is some state.

300
00:16:05,220 --> 00:16:07,726
‫So, let's say, "movieRating,"

301
00:16:07,726 --> 00:16:09,309
‫and setMovieRating,

302
00:16:12,880 --> 00:16:14,380
‫and then useState,

303
00:16:15,480 --> 00:16:17,790
‫and let's again set it to zero.

304
00:16:17,790 --> 00:16:19,210
‫And then here, let's use

305
00:16:20,460 --> 00:16:22,500
‫that movie rating.

306
00:16:22,500 --> 00:16:25,530
‫But of course, this now will not change at all

307
00:16:25,530 --> 00:16:28,560
‫when we rate the movie right here.

308
00:16:28,560 --> 00:16:31,860
‫So, we need a way to update this state here

309
00:16:31,860 --> 00:16:36,720
‫whenever the state inside this component is updated as well.

310
00:16:36,720 --> 00:16:38,490
‫So how do we do that?

311
00:16:38,490 --> 00:16:41,640
‫Well, basically, we want to give the consumer

312
00:16:41,640 --> 00:16:46,353
‫of this component the ability to pass in a set function.

313
00:16:47,670 --> 00:16:51,390
‫So, basically, we want them to allow to specify

314
00:16:51,390 --> 00:16:52,640
‫an onSetRating

315
00:16:54,570 --> 00:16:55,403
‫handler.

316
00:16:58,650 --> 00:17:02,970
‫And so, in this case, what this component wants to pass in

317
00:17:02,970 --> 00:17:05,013
‫is simply this function right here.

318
00:17:06,840 --> 00:17:11,400
‫Okay, so let's now specify, then, this prop here.

319
00:17:11,400 --> 00:17:14,820
‫So you want to accept this very important prop right here.

320
00:17:14,820 --> 00:17:18,210
‫And this one by default doesn't need any

321
00:17:18,210 --> 00:17:19,043
‫default value

322
00:17:20,550 --> 00:17:21,630
‫now, right?

323
00:17:21,630 --> 00:17:23,400
‫And now, it's very simple.

324
00:17:23,400 --> 00:17:26,550
‫All we have to do here is, on the handle rating,

325
00:17:26,550 --> 00:17:29,760
‫is to not only set the internal rating,

326
00:17:29,760 --> 00:17:34,560
‫but also to basically set the external rating.

327
00:17:34,560 --> 00:17:36,783
‫So, we can now just say onSetRating.

328
00:17:39,000 --> 00:17:41,283
‫also set that external rating.

329
00:17:42,450 --> 00:17:46,800
‫And with this, we now gave the outside test component,

330
00:17:46,800 --> 00:17:51,300
‫basically, the ability to get access to that internal state

331
00:17:51,300 --> 00:17:53,523
‫right inside this component.

332
00:17:54,810 --> 00:17:56,940
‫Okay, and now, if we change this here,

333
00:17:56,940 --> 00:18:01,050
‫you see that it did, indeed, get updated to seven.

334
00:18:01,050 --> 00:18:03,450
‫So, this additional configuration,

335
00:18:03,450 --> 00:18:06,540
‫so this final prop that we updated here,

336
00:18:06,540 --> 00:18:09,990
‫or that we actually added here to our component,

337
00:18:09,990 --> 00:18:12,030
‫was really, really important

338
00:18:12,030 --> 00:18:16,110
‫because without this, this component would really just be

339
00:18:16,110 --> 00:18:18,000
‫presentational in the end.

340
00:18:18,000 --> 00:18:20,940
‫I mean, it contains some state internally,

341
00:18:20,940 --> 00:18:23,880
‫but from the perspective of the test component,

342
00:18:23,880 --> 00:18:26,340
‫we couldn't really touch that state in any way.

343
00:18:26,340 --> 00:18:29,130
‫And, therefore, we couldn't use that state

344
00:18:29,130 --> 00:18:32,190
‫inside this component, which then, again,

345
00:18:32,190 --> 00:18:35,100
‫wouldn't make this component really useful.

346
00:18:35,100 --> 00:18:39,240
‫Okay, so this was the final prop that we edit,

347
00:18:39,240 --> 00:18:41,520
‫and as I said, we could keep going

348
00:18:41,520 --> 00:18:43,470
‫and get really crazy here

349
00:18:43,470 --> 00:18:45,900
‫with our configuration options.

350
00:18:45,900 --> 00:18:48,180
‫And you could, of course, if you wanted,

351
00:18:48,180 --> 00:18:50,940
‫allow some other things such as the ones

352
00:18:50,940 --> 00:18:53,010
‫that I have mentioned earlier.

353
00:18:53,010 --> 00:18:56,580
‫But we will just leave it as this because I think this,

354
00:18:56,580 --> 00:18:59,340
‫right now, is a pretty good balance.

355
00:18:59,340 --> 00:19:02,490
‫Now, there's just one final thing that we need to do here

356
00:19:02,490 --> 00:19:06,390
‫in our component, which is to prevent the user,

357
00:19:06,390 --> 00:19:09,990
‫basically, to pass in some values that we do not want.

358
00:19:09,990 --> 00:19:13,800
‫So here, for example, this shouldn't be a string, right?

359
00:19:13,800 --> 00:19:17,220
‫'Cause, well, (laughs) then this wouldn't work at all.

360
00:19:17,220 --> 00:19:21,180
‫So we need to make sure that this is actually a number here.

361
00:19:21,180 --> 00:19:23,760
‫And so, let's look at something called prop types

362
00:19:23,760 --> 00:19:25,083
‫in the next lecture.