1
00:00:01,110 --> 00:00:03,000
‫Let's now learn about yet another

2
00:00:03,000 --> 00:00:07,710
‫fundamental React concept which is controlled elements.

3
00:00:07,710 --> 00:00:10,050
‫So let's take a look what they are

4
00:00:10,050 --> 00:00:12,180
‫and how we use controlled elements

5
00:00:12,180 --> 00:00:14,793
‫when working with forms in React.

6
00:00:16,380 --> 00:00:20,460
‫So to start, what we need to understand is that by default

7
00:00:20,460 --> 00:00:25,080
‫these input fields like this input and also this select

8
00:00:25,080 --> 00:00:28,560
‫they maintain their own state inside the DOM.

9
00:00:28,560 --> 00:00:32,970
‫So basically inside the HTML element itself.

10
00:00:32,970 --> 00:00:36,120
‫Now this makes it hard to read their values

11
00:00:36,120 --> 00:00:39,540
‫and it also leaves this state right here in the DOM

12
00:00:39,540 --> 00:00:42,570
‫which for many reasons is not ideal.

13
00:00:42,570 --> 00:00:46,320
‫So in React, we usually like to keep all this state

14
00:00:46,320 --> 00:00:48,510
‫in just one central place.

15
00:00:48,510 --> 00:00:53,250
‫So inside the React application and not inside the DOM.

16
00:00:53,250 --> 00:00:55,950
‫And so in order to do that we use a technique

17
00:00:55,950 --> 00:00:58,200
‫called controlled elements.

18
00:00:58,200 --> 00:00:59,940
‫And so with this technique

19
00:00:59,940 --> 00:01:03,600
‫it is React who controls and owns the state

20
00:01:03,600 --> 00:01:07,140
‫of these input fields and no longer the DOM.

21
00:01:07,140 --> 00:01:09,780
‫So since we want to now keep this data

22
00:01:09,780 --> 00:01:12,210
‫inside the application, what that means

23
00:01:12,210 --> 00:01:14,880
‫is that we need some state, right?

24
00:01:14,880 --> 00:01:18,030
‫Because that form data of course changes over time

25
00:01:18,030 --> 00:01:20,580
‫and we also want to maintain our application

26
00:01:20,580 --> 00:01:21,933
‫in sync with it.

27
00:01:23,580 --> 00:01:27,300
‫So in order to implement the controlled elements technique,

28
00:01:27,300 --> 00:01:29,130
‫we follow three steps.

29
00:01:29,130 --> 00:01:31,740
‫First we create a piece of state.

30
00:01:31,740 --> 00:01:33,540
‫So let's start with that

31
00:01:33,540 --> 00:01:37,050
‫and we will start here with this actual input element.

32
00:01:37,050 --> 00:01:40,293
‫So with this text field right there.

33
00:01:43,290 --> 00:01:46,260
‫So that field is for the item description.

34
00:01:46,260 --> 00:01:48,510
‫And so we call it description.

35
00:01:48,510 --> 00:01:53,143
‫And then as always, the setter function is set description.

36
00:01:54,480 --> 00:01:57,510
‫And so then we use the use state hook.

37
00:01:57,510 --> 00:01:59,670
‫So the use state function.

38
00:01:59,670 --> 00:02:03,180
‫And then just like before, when VS code shows us

39
00:02:03,180 --> 00:02:04,920
‫this auto completion here

40
00:02:04,920 --> 00:02:08,040
‫make sure to click here or to hit enter

41
00:02:08,040 --> 00:02:11,160
‫because that will then automatically include

42
00:02:11,160 --> 00:02:16,160
‫so it will import this use state hook into this file.

43
00:02:16,380 --> 00:02:19,470
‫So it will automatically include this line of code

44
00:02:19,470 --> 00:02:22,950
‫and then for some reason that didn't work in your VS code

45
00:02:22,950 --> 00:02:25,473
‫then make sure to just write this out by hand.

46
00:02:26,610 --> 00:02:27,660
‫Now the default value

47
00:02:27,660 --> 00:02:32,550
‫for this description can just be an empty string like this.

48
00:02:32,550 --> 00:02:37,260
‫And so now we finished the first step of this technique.

49
00:02:37,260 --> 00:02:38,970
‫So we have our piece of state

50
00:02:38,970 --> 00:02:43,083
‫and now we use that state as a value of the input field.

51
00:02:44,220 --> 00:02:45,720
‫So we come down here

52
00:02:45,720 --> 00:02:48,790
‫to the input that we want React to control

53
00:02:49,770 --> 00:02:51,930
‫and then we specify the value

54
00:02:51,930 --> 00:02:55,560
‫which again is just a normal HTML field, alright?

55
00:02:55,560 --> 00:02:58,380
‫So even in HTML you can use value

56
00:02:58,380 --> 00:03:00,180
‫and then set it to something.

57
00:03:00,180 --> 00:03:02,853
‫So we could also do just this.

58
00:03:03,870 --> 00:03:07,440
‫Alright? But now we don't want that.

59
00:03:07,440 --> 00:03:09,693
‫But instead we want our description.

60
00:03:11,700 --> 00:03:14,163
‫Give it a save and there we go.

61
00:03:15,060 --> 00:03:17,103
‫Let's just reload to get rid of this.

62
00:03:18,000 --> 00:03:19,680
‫Yeah, here we get another warning

63
00:03:19,680 --> 00:03:22,023
‫and it's already telling us the third step

64
00:03:22,023 --> 00:03:23,760
‫that we need to take.

65
00:03:23,760 --> 00:03:27,330
‫But for now, let's just see what happens if for example

66
00:03:27,330 --> 00:03:29,643
‫here we write now test.

67
00:03:30,930 --> 00:03:35,223
‫So you see now our input field has the value of our state.

68
00:03:36,870 --> 00:03:39,450
‫Okay and now for the final step,

69
00:03:39,450 --> 00:03:42,540
‫we of course now need to somehow connect this state

70
00:03:42,540 --> 00:03:45,290
‫with the value that we are actually going to type there

71
00:03:46,980 --> 00:03:50,760
‫right, because now the state will simply always stay empty

72
00:03:50,760 --> 00:03:52,653
‫even if we type something here.

73
00:03:53,520 --> 00:03:56,340
‫So React is now controlling this element

74
00:03:56,340 --> 00:03:59,040
‫and always sets it to the description.

75
00:03:59,040 --> 00:04:02,010
‫But the description right now always stays

76
00:04:02,010 --> 00:04:03,360
‫at this empty string.

77
00:04:03,360 --> 00:04:05,010
‫And so no matter what we do,

78
00:04:05,010 --> 00:04:07,290
‫right now we cannot change this.

79
00:04:07,290 --> 00:04:11,280
‫So what we need to do is to also on the same element

80
00:04:11,280 --> 00:04:13,383
‫listen for the change event.

81
00:04:14,880 --> 00:04:17,523
‫So that's using the on change prop.

82
00:04:18,690 --> 00:04:21,900
‫And then here let's just define an inline function.

83
00:04:21,900 --> 00:04:26,070
‫And this function receives the event that was fired off.

84
00:04:26,070 --> 00:04:28,830
‫So in this case the change event.

85
00:04:28,830 --> 00:04:30,750
‫And then here, let's just type the code

86
00:04:30,750 --> 00:04:34,830
‫and I will explain what actually is happening here.

87
00:04:34,830 --> 00:04:38,513
‫So set description, e.target.value.

88
00:04:41,250 --> 00:04:43,830
‫All right and now if we type here,

89
00:04:43,830 --> 00:04:45,423
‫first let's reload again,

90
00:04:47,250 --> 00:04:50,220
‫now that we type here, it works.

91
00:04:50,220 --> 00:04:52,020
‫And to make this even more visual

92
00:04:52,020 --> 00:04:54,270
‫let's come back here to our dev tools.

93
00:04:54,270 --> 00:04:55,593
‫And then here in the form,

94
00:04:56,640 --> 00:04:58,683
‫we need even more space.

95
00:04:59,550 --> 00:05:02,670
‫So you see that we have our state of test

96
00:05:02,670 --> 00:05:04,170
‫and if we write here,

97
00:05:04,170 --> 00:05:07,390
‫then notice how that state down there is updating

98
00:05:09,630 --> 00:05:11,160
‫so we can write anything.

99
00:05:11,160 --> 00:05:13,650
‫And then basically it will get synchronized

100
00:05:13,650 --> 00:05:16,590
‫with this state that we have in our application.

101
00:05:16,590 --> 00:05:20,520
‫And so now it is in fact React that owns the state

102
00:05:20,520 --> 00:05:22,800
‫and that is controlling the state.

103
00:05:22,800 --> 00:05:25,500
‫But now back here to this line of code.

104
00:05:25,500 --> 00:05:28,890
‫So basically, whenever we type something in this field

105
00:05:28,890 --> 00:05:32,340
‫the change event is fired off and we can react

106
00:05:32,340 --> 00:05:36,450
‫to that event here with this on change event handler.

107
00:05:36,450 --> 00:05:38,460
‫And so here we pass in the function

108
00:05:38,460 --> 00:05:42,030
‫and the function as always receives the event.

109
00:05:42,030 --> 00:05:44,460
‫And then on the event we read target

110
00:05:44,460 --> 00:05:47,730
‫and e.target is basically this entire element.

111
00:05:47,730 --> 00:05:51,060
‫And then this element.value is exactly

112
00:05:51,060 --> 00:05:52,593
‫the text that we wrote.

113
00:05:53,730 --> 00:05:55,860
‫And just to make this a bit more visual

114
00:05:55,860 --> 00:05:58,920
‫'cause I know that this can a bit tricky to understand

115
00:05:58,920 --> 00:06:01,320
‫so I want to make sure that you get it.

116
00:06:01,320 --> 00:06:06,320
‫So let's log to the console, also this e.target maybe.

117
00:06:11,970 --> 00:06:15,510
‫So as I delete now, this will fire off the change event.

118
00:06:15,510 --> 00:06:18,033
‫And so then here we get e.target.

119
00:06:19,140 --> 00:06:21,570
‫So as I hover it, you see that e.target

120
00:06:21,570 --> 00:06:23,673
‫is the entire element indeed.

121
00:06:24,870 --> 00:06:26,970
‫So watch what happens when I set

122
00:06:26,970 --> 00:06:30,453
‫or when I log e.target.value.

123
00:06:33,750 --> 00:06:37,440
‫So immediately that character that I just typed

124
00:06:37,440 --> 00:06:40,740
‫was logged here to the console and not just the character,

125
00:06:40,740 --> 00:06:42,780
‫but actually the entire value.

126
00:06:42,780 --> 00:06:44,580
‫So now I write another one

127
00:06:44,580 --> 00:06:48,720
‫and then now we get t then test and then test.

128
00:06:48,720 --> 00:06:51,960
‫And so it is this value that each time

129
00:06:51,960 --> 00:06:53,430
‫that we write something,

130
00:06:53,430 --> 00:06:58,310
‫we set as the new state of the description, all right?

131
00:07:00,510 --> 00:07:02,250
‫So just to drive this home,

132
00:07:02,250 --> 00:07:06,120
‫each time that we type here, we set the state again.

133
00:07:06,120 --> 00:07:08,610
‫So we set it to the string that is currently

134
00:07:08,610 --> 00:07:12,480
‫in this input field, which will then re-render this view.

135
00:07:12,480 --> 00:07:14,730
‫So this entire form here actually.

136
00:07:14,730 --> 00:07:16,080
‫And so then that new state

137
00:07:16,080 --> 00:07:20,220
‫of description will get placed there as the value.

138
00:07:20,220 --> 00:07:22,680
‫So we always need both the value

139
00:07:22,680 --> 00:07:25,683
‫and the change here on the input element.

140
00:07:28,020 --> 00:07:30,183
‫Let's get rid of these curly braces here.

141
00:07:34,110 --> 00:07:35,190
‫Yeah, just like this.

142
00:07:35,190 --> 00:07:38,550
‫And just to see if we actually understood this

143
00:07:38,550 --> 00:07:40,710
‫we now need to do the exact same thing

144
00:07:40,710 --> 00:07:42,510
‫with the select element.

145
00:07:42,510 --> 00:07:44,640
‫And if you want, you can actually pause the video

146
00:07:44,640 --> 00:07:46,803
‫and try that as a challenge now.

147
00:07:48,630 --> 00:07:50,340
‫So did you try that?

148
00:07:50,340 --> 00:07:53,640
‫Well, if not, that's no problem at all

149
00:07:53,640 --> 00:07:56,220
‫'cause we only did this once, so I understand

150
00:07:56,220 --> 00:08:00,240
‫that it's still quite fresh and maybe confusing.

151
00:08:00,240 --> 00:08:03,720
‫But anyway, we now also need to control this

152
00:08:03,720 --> 00:08:06,330
‫select input element right here.

153
00:08:06,330 --> 00:08:08,370
‫So that's going to be the quantity.

154
00:08:08,370 --> 00:08:10,740
‫So let's call that state quantity.

155
00:08:10,740 --> 00:08:14,193
‫And the setter function is set quantity.

156
00:08:16,290 --> 00:08:19,710
‫And then again, use state and here the default value

157
00:08:19,710 --> 00:08:23,310
‫we want it to be one, let's just say five for now

158
00:08:23,310 --> 00:08:25,683
‫just so we see the effect in the UI.

159
00:08:26,790 --> 00:08:29,850
‫Okay? So that's the first step.

160
00:08:29,850 --> 00:08:33,780
‫Now the second step is to then define the value.

161
00:08:33,780 --> 00:08:34,830
‫And so in this moment

162
00:08:34,830 --> 00:08:37,623
‫React then starts controlling this element.

163
00:08:38,970 --> 00:08:42,363
‫So value of quantity, well, what was that?

164
00:08:46,230 --> 00:08:49,743
‫And you see, immediately we get this five.

165
00:08:50,670 --> 00:08:54,183
‫Again with this, it's easier to see with our dev tools.

166
00:08:56,130 --> 00:08:58,290
‫And yeah, so that's the five.

167
00:08:58,290 --> 00:09:00,030
‫But of course if we change this now

168
00:09:00,030 --> 00:09:02,070
‫then nothing will happen.

169
00:09:02,070 --> 00:09:04,770
‫And so the reason for that is the same as before

170
00:09:04,770 --> 00:09:09,060
‫because this value is now coming from our quantity state.

171
00:09:09,060 --> 00:09:12,450
‫The DOM is no longer in charge of this value now,

172
00:09:12,450 --> 00:09:14,430
‫the only thing that we now have to do

173
00:09:14,430 --> 00:09:17,850
‫is to give this the ability to change itself.

174
00:09:17,850 --> 00:09:20,310
‫So to basically update the state

175
00:09:20,310 --> 00:09:23,463
‫each time that we change this value here.

176
00:09:29,430 --> 00:09:34,430
‫So that's again using the on change handler.

177
00:09:34,560 --> 00:09:36,810
‫And this function gets the current event.

178
00:09:36,810 --> 00:09:39,660
‫And here we now do the exact same thing.

179
00:09:39,660 --> 00:09:42,430
‫So we set quantity

180
00:09:43,680 --> 00:09:46,613
‫based on e.target.value,

181
00:09:49,140 --> 00:09:51,630
‫and by the way, this value is coming directly

182
00:09:51,630 --> 00:09:54,690
‫from the option so right from here.

183
00:09:54,690 --> 00:09:57,210
‫So that's why we need to set the value

184
00:09:57,210 --> 00:09:58,923
‫here inside of each option.

185
00:10:00,180 --> 00:10:02,490
‫Just to make sure, let's give it a save.

186
00:10:02,490 --> 00:10:05,670
‫And there we go.

187
00:10:05,670 --> 00:10:10,350
‫So you see it changed here and it also changed here.

188
00:10:10,350 --> 00:10:12,330
‫Maybe you cannot really see this

189
00:10:12,330 --> 00:10:17,010
‫as it's right at the bottom, but yeah, here is the 10.

190
00:10:17,010 --> 00:10:20,160
‫Now what we can see immediately is that this is

191
00:10:20,160 --> 00:10:24,450
‫a string while in the beginning when we first load the app,

192
00:10:24,450 --> 00:10:28,830
‫let's try that, we get the five but without the quotes.

193
00:10:28,830 --> 00:10:32,070
‫So now this is actually not a string, it's still a number.

194
00:10:32,070 --> 00:10:35,580
‫And that's because we set the default here as a number.

195
00:10:35,580 --> 00:10:37,450
‫But then as soon as we change this

196
00:10:39,210 --> 00:10:42,930
‫for example to something, then here we get this string.

197
00:10:42,930 --> 00:10:45,030
‫And so the reason for that is that here

198
00:10:45,030 --> 00:10:48,930
‫e.target.value is always a string.

199
00:10:48,930 --> 00:10:52,200
‫So before we place this value into the state

200
00:10:52,200 --> 00:10:54,780
‫let's first convert it to a number.

201
00:10:54,780 --> 00:10:57,870
‫And we can do that in a few different ways.

202
00:10:57,870 --> 00:11:01,170
‫We can use the trick of using a plus

203
00:11:01,170 --> 00:11:03,663
‫or we can be a bit more explicit,

204
00:11:04,620 --> 00:11:06,810
‫for example using the number function.

205
00:11:06,810 --> 00:11:08,910
‫So I prefer to doing it like this

206
00:11:08,910 --> 00:11:11,340
‫which makes the code a bit more readable.

207
00:11:11,340 --> 00:11:13,420
‫So give it a save and now

208
00:11:15,210 --> 00:11:17,400
‫let's see, yeah, now we get a number

209
00:11:17,400 --> 00:11:19,620
‫and of course still when we write here

210
00:11:19,620 --> 00:11:23,010
‫that will also update the state down here.

211
00:11:23,010 --> 00:11:25,530
‫And this was actually an excellent demo

212
00:11:25,530 --> 00:11:29,190
‫to show you how useful really these dev tools are

213
00:11:29,190 --> 00:11:31,890
‫because they allowed us to immediately spot

214
00:11:31,890 --> 00:11:35,040
‫that we didn't have a number here by the string.

215
00:11:35,040 --> 00:11:39,720
‫And so with this, we prevented a potential bug in our code.

216
00:11:39,720 --> 00:11:42,780
‫Great, so hopefully you got that

217
00:11:42,780 --> 00:11:45,633
‫so you understood exactly how that works.

218
00:11:46,620 --> 00:11:48,600
‫So just to quickly recap,

219
00:11:48,600 --> 00:11:50,790
‫the technique of controlled elements

220
00:11:50,790 --> 00:11:53,490
‫basically consists of three steps.

221
00:11:53,490 --> 00:11:57,270
‫So we define a piece of state, like this description here

222
00:11:57,270 --> 00:11:59,820
‫then we use that piece of state

223
00:11:59,820 --> 00:12:02,460
‫on the element that we want to control.

224
00:12:02,460 --> 00:12:05,880
‫So we basically force the element to always take the value

225
00:12:05,880 --> 00:12:08,010
‫of this state variable.

226
00:12:08,010 --> 00:12:09,450
‫And then finally, of course

227
00:12:09,450 --> 00:12:11,760
‫we need to update that state variable.

228
00:12:11,760 --> 00:12:15,180
‫And we do so here with the on change handler

229
00:12:15,180 --> 00:12:17,130
‫where we then set the description

230
00:12:17,130 --> 00:12:20,400
‫to the current value of that input field.

231
00:12:20,400 --> 00:12:23,400
‫And so with this, it is now this component.

232
00:12:23,400 --> 00:12:26,250
‫So basically it's React who is in charge

233
00:12:26,250 --> 00:12:30,000
‫of the state and really of the entire element.

234
00:12:30,000 --> 00:12:32,190
‫And so that's the reason why this technique

235
00:12:32,190 --> 00:12:34,203
‫is called controlled element.

236
00:12:35,130 --> 00:12:37,410
‫Great. So that should be clear now.

237
00:12:37,410 --> 00:12:38,700
‫And so let's now go ahead

238
00:12:38,700 --> 00:12:41,880
‫and just quickly use these values here.

239
00:12:41,880 --> 00:12:45,700
‫For example, we can create a new item object

240
00:12:47,460 --> 00:12:51,183
‫so a description, quantity,

241
00:12:52,890 --> 00:12:56,673
‫also we have the packed state in each of these items.

242
00:12:58,230 --> 00:13:02,490
‫And by default of course the items should not be packed.

243
00:13:02,490 --> 00:13:05,310
‫So let's set it to false here.

244
00:13:05,310 --> 00:13:06,843
‫And then we also need an ID.

245
00:13:07,710 --> 00:13:11,040
‫Now we could use some library here to generate that ID

246
00:13:11,040 --> 00:13:14,943
‫but let's do it quick and dirty here, just with date.now.

247
00:13:15,930 --> 00:13:18,570
‫So that should just work here in this case.

248
00:13:18,570 --> 00:13:21,993
‫And then for now, we will just log it to the console.

249
00:13:25,020 --> 00:13:30,020
‫Alright, let's go to our console, reload, all of this.

250
00:13:30,210 --> 00:13:32,880
‫And actually let's also set it to one

251
00:13:32,880 --> 00:13:35,493
‫which is the default that makes most sense.

252
00:13:37,290 --> 00:13:41,820
‫So let's say that we need 10 shirts.

253
00:13:41,820 --> 00:13:45,870
‫So hit enter and beautiful.

254
00:13:45,870 --> 00:13:49,140
‫So we got our data here from the state

255
00:13:49,140 --> 00:13:51,000
‫and it contains the description

256
00:13:51,000 --> 00:13:54,150
‫it contains the quantity right here.

257
00:13:54,150 --> 00:13:56,640
‫And then these other data that we just defined.

258
00:13:56,640 --> 00:14:01,640
‫So some random ID and also this packed state set to false.

259
00:14:01,740 --> 00:14:05,010
‫So with this we learned how we get now this data

260
00:14:05,010 --> 00:14:06,063
‫out of the form.

261
00:14:06,990 --> 00:14:09,060
‫Now just to finish, let's tweak

262
00:14:09,060 --> 00:14:11,550
‫or handle submit function a little bit.

263
00:14:11,550 --> 00:14:16,020
‫For example, when this happens, so when we submit the form

264
00:14:16,020 --> 00:14:19,650
‫without any item, then still this works.

265
00:14:19,650 --> 00:14:23,160
‫But the description is simply set to an empty string

266
00:14:23,160 --> 00:14:25,350
‫which is already filed here.

267
00:14:25,350 --> 00:14:28,830
‫However, we don't want this to happen.

268
00:14:28,830 --> 00:14:31,080
‫So when there's no description here

269
00:14:31,080 --> 00:14:34,053
‫then we shouldn't even be able to submit the form.

270
00:14:35,280 --> 00:14:37,500
‫So that's simple enough.

271
00:14:37,500 --> 00:14:40,263
‫We can just add like a guard clause here.

272
00:14:41,520 --> 00:14:45,960
‫So we can say if there is no description,

273
00:14:45,960 --> 00:14:47,760
‫then return immediately.

274
00:14:47,760 --> 00:14:50,370
‫So basically then nothing's going to happen.

275
00:14:50,370 --> 00:14:52,650
‫And again, this is some normal JavaScript,

276
00:14:52,650 --> 00:14:54,003
‫nothing to do with React.

277
00:14:56,430 --> 00:15:00,160
‫So you see nothing happens now, but if so

278
00:15:01,530 --> 00:15:03,660
‫then we get our object.

279
00:15:03,660 --> 00:15:07,080
‫And now finally, usually when we submit a form

280
00:15:07,080 --> 00:15:10,170
‫then afterwards, once that submission is done

281
00:15:10,170 --> 00:15:13,290
‫the form should go back to its initial state.

282
00:15:13,290 --> 00:15:14,730
‫So let's also do that.

283
00:15:14,730 --> 00:15:19,410
‫And for that we can simply use our setter functions, right?

284
00:15:19,410 --> 00:15:20,460
‫And so that's the beauty

285
00:15:20,460 --> 00:15:23,160
‫of React being in charge of the form

286
00:15:23,160 --> 00:15:26,310
‫because now all we have to do is to update the state

287
00:15:26,310 --> 00:15:30,600
‫and then this enables React to automatically keep this state

288
00:15:30,600 --> 00:15:33,720
‫in sync with these form elements.

289
00:15:33,720 --> 00:15:35,610
‫So basically that's the whole idea

290
00:15:35,610 --> 00:15:37,320
‫of the controlled elements.

291
00:15:37,320 --> 00:15:40,410
‫It's to allow React to keep our component state

292
00:15:40,410 --> 00:15:45,410
‫in sync with the state of these dumb form elements.

293
00:15:45,510 --> 00:15:48,180
‫But anyway, let's now do what I just said.

294
00:15:48,180 --> 00:15:52,170
‫So setting the description back to its initial state

295
00:15:52,170 --> 00:15:56,733
‫and set the quantity also back to its initial state.

296
00:15:58,560 --> 00:16:00,933
‫So let's try that one more time.

297
00:16:04,830 --> 00:16:06,900
‫And beautiful.

298
00:16:06,900 --> 00:16:10,080
‫So that worked really, really nicely.

299
00:16:10,080 --> 00:16:12,600
‫So this form is now a lot more real world.

300
00:16:12,600 --> 00:16:14,700
‫It's back to its initial state.

301
00:16:14,700 --> 00:16:16,950
‫And then down here we get the data.

302
00:16:16,950 --> 00:16:20,340
‫But now what do we do with this data?

303
00:16:20,340 --> 00:16:23,340
‫So at some point we will want to actually render

304
00:16:23,340 --> 00:16:26,850
‫this new object here into the user interface.

305
00:16:26,850 --> 00:16:31,320
‫So right here into this packing list, right?

306
00:16:31,320 --> 00:16:33,870
‫So how do you think we will do that?

307
00:16:33,870 --> 00:16:37,470
‫So how can we get this new state?

308
00:16:37,470 --> 00:16:40,560
‫So basically this new object that we just created

309
00:16:40,560 --> 00:16:42,660
‫into this list.

310
00:16:42,660 --> 00:16:44,943
‫And just as a reminder, this list,

311
00:16:45,900 --> 00:16:48,613
‫well, it's even easier to see in the componentry.

312
00:16:49,650 --> 00:16:52,590
‫So we have the form, and here is the list.

313
00:16:52,590 --> 00:16:54,990
‫So we want to get the data from this form

314
00:16:54,990 --> 00:16:57,750
‫into this packing list right here.

315
00:16:57,750 --> 00:17:01,290
‫So do you think that we could do that with props?

316
00:17:01,290 --> 00:17:03,480
‫Well, not really, right?

317
00:17:03,480 --> 00:17:06,120
‫Because these are sibling components.

318
00:17:06,120 --> 00:17:09,630
‫The form is not a parent component of the packing list

319
00:17:09,630 --> 00:17:12,870
‫and therefore we cannot pass props from form

320
00:17:12,870 --> 00:17:14,960
‫into the packing list, right?

321
00:17:14,960 --> 00:17:18,270
‫So because data can only flow down the tree

322
00:17:18,270 --> 00:17:20,610
‫but not up or sideways.

323
00:17:20,610 --> 00:17:22,350
‫So that was one of the important things

324
00:17:22,350 --> 00:17:26,010
‫that we learned about props, remember that?

325
00:17:26,010 --> 00:17:29,880
‫So therefore, if we cannot use props in a simple way

326
00:17:29,880 --> 00:17:31,890
‫we need to find another solution.

327
00:17:31,890 --> 00:17:34,140
‫And so this is where we really need to start

328
00:17:34,140 --> 00:17:38,190
‫thinking more about state and state management.

329
00:17:38,190 --> 00:17:42,060
‫But since this is so important as a React developer,

330
00:17:42,060 --> 00:17:44,580
‫I created an entire separate section

331
00:17:44,580 --> 00:17:48,753
‫about thinking in React and that section is up next.

332
00:17:49,710 --> 00:17:52,230
‫So what we're gonna do now is to take a break

333
00:17:52,230 --> 00:17:55,020
‫in this application and finish this section

334
00:17:55,020 --> 00:17:58,710
‫with a brief summary and a challenge to consolidate

335
00:17:58,710 --> 00:18:02,310
‫our knowledge about how to use state in React.

336
00:18:02,310 --> 00:18:04,470
‫And then after that, we will come back

337
00:18:04,470 --> 00:18:06,210
‫here to this application

338
00:18:06,210 --> 00:18:08,250
‫and then we will really make it work.

339
00:18:08,250 --> 00:18:11,910
‫So then we will be able to pass data

340
00:18:11,910 --> 00:18:15,300
‫basically from the form into the list.

341
00:18:15,300 --> 00:18:17,250
‫So that's going to be a lot of fun.

342
00:18:17,250 --> 00:18:19,410
‫So make sure to finish this section

343
00:18:19,410 --> 00:18:21,330
‫and then right afterwards,

344
00:18:21,330 --> 00:18:23,493
‫let's keep going with this application.