1
00:00:01,140 --> 00:00:03,060
‫One of the most important things

2
00:00:03,060 --> 00:00:04,620
‫that we do on the web

3
00:00:04,620 --> 00:00:08,670
‫is to interact with web applications through forms.

4
00:00:08,670 --> 00:00:12,750
‫So forms are fundamental in web applications.

5
00:00:12,750 --> 00:00:14,640
‫And so let's now start learning

6
00:00:14,640 --> 00:00:17,523
‫how to work with forms in React.

7
00:00:18,930 --> 00:00:22,100
‫And first off, when we build forms in React,

8
00:00:22,100 --> 00:00:26,490
‫we use the normal HTML form element.

9
00:00:26,490 --> 00:00:28,590
‫So we have a form, and then here,

10
00:00:28,590 --> 00:00:32,373
‫let's add the select, the input, and the button.

11
00:00:33,300 --> 00:00:36,323
‫So just looking at the demo here in HTML,

12
00:00:36,323 --> 00:00:39,927
‫this is a select element, this is an input element.

13
00:00:39,927 --> 00:00:42,213
‫And this is just a regular button.

14
00:00:44,190 --> 00:00:46,260
‫Now here, we need to change that as well.

15
00:00:46,260 --> 00:00:49,530
‫And there is a setting in VS code that will make it so,

16
00:00:49,530 --> 00:00:51,540
‫that as I update this one,

17
00:00:51,540 --> 00:00:53,970
‫the closing tag also gets updated.

18
00:00:53,970 --> 00:00:56,430
‫But I will find that out after this video,

19
00:00:56,430 --> 00:00:58,650
‫and then I will let you know.

20
00:00:58,650 --> 00:01:03,270
‫But anyway, let's now create that, select element.

21
00:01:03,270 --> 00:01:06,213
‫And now here, we want to create a bunch of numbers.

22
00:01:07,050 --> 00:01:12,050
‫So inside the select, we create one option with the value.

23
00:01:12,960 --> 00:01:16,140
‫And here let's use again JavaScript mode.

24
00:01:16,140 --> 00:01:18,810
‫So in order to pass an actual number one,

25
00:01:18,810 --> 00:01:20,943
‫and not the string of one,

26
00:01:22,320 --> 00:01:24,120
‫let's just duplicate this a few times,

27
00:01:24,120 --> 00:01:26,340
‫because we will actually not use this.

28
00:01:26,340 --> 00:01:30,600
‫So you don't need to write this code, if you don't want to.

29
00:01:30,600 --> 00:01:33,480
‫So this is just to show you what we will do instead,

30
00:01:33,480 --> 00:01:34,890
‫in a minute here.

31
00:01:34,890 --> 00:01:39,030
‫Let's just create that input first, after type text.

32
00:01:40,650 --> 00:01:43,293
‫And let's also include a placeholder here.

33
00:01:45,120 --> 00:01:47,940
‫And again, this is just normal HTML,

34
00:01:47,940 --> 00:01:49,923
‫what we're doing here right now.

35
00:01:52,110 --> 00:01:54,873
‫Finally a button with add.

36
00:01:56,220 --> 00:01:58,050
‫Now okay, beautiful.

37
00:01:58,050 --> 00:02:02,433
‫So that looks just like here, or very similar.

38
00:02:03,270 --> 00:02:05,130
‫So here we have the one, two, three.

39
00:02:05,130 --> 00:02:06,750
‫So these three values.

40
00:02:06,750 --> 00:02:10,680
‫But here in the real app, we have 20.

41
00:02:10,680 --> 00:02:11,513
‫So of course,

42
00:02:11,513 --> 00:02:16,513
‫we don't want to write these 20 options over there by hand,

43
00:02:16,530 --> 00:02:17,363
‫right?

44
00:02:17,363 --> 00:02:21,930
‫So instead what we do is to, inside of JavaScript,

45
00:02:21,930 --> 00:02:25,830
‫we will create an array with the numbers from one to 20,

46
00:02:25,830 --> 00:02:28,260
‫and then we will loop over that array,

47
00:02:28,260 --> 00:02:32,400
‫and basically create a list of option elements.

48
00:02:32,400 --> 00:02:35,250
‫So let's do that, and we will use a nice trick,

49
00:02:35,250 --> 00:02:38,010
‫which is called array.from.

50
00:02:38,010 --> 00:02:41,460
‫And it's not really important how this function works.

51
00:02:41,460 --> 00:02:44,190
‫So let's just follow this here.

52
00:02:44,190 --> 00:02:46,770
‫And actually, we will do this all the time in React.

53
00:02:46,770 --> 00:02:49,800
‫So this trick is actually quite important.

54
00:02:49,800 --> 00:02:51,300
‫So as a first parameter here,

55
00:02:51,300 --> 00:02:54,660
‫we can pass in an object with a length property,

56
00:02:54,660 --> 00:02:56,010
‫and set that to 20.

57
00:02:56,010 --> 00:02:59,370
‫So that will then create an empty array with 20 elements.

58
00:02:59,370 --> 00:03:01,170
‫And then as a second part,

59
00:03:01,170 --> 00:03:05,013
‫we can pass in basically something like a map function.

60
00:03:05,910 --> 00:03:08,550
‫So that will receive as a first argument,

61
00:03:08,550 --> 00:03:11,973
‫the current value, and as a second argument, the index.

62
00:03:12,840 --> 00:03:15,330
‫And so here, we are only interested in that index,

63
00:03:15,330 --> 00:03:18,030
‫because we will now return that index,

64
00:03:18,030 --> 00:03:20,850
‫which starts at zero plus one.

65
00:03:20,850 --> 00:03:25,830
‫And so then we get an array, which goes from one to 20.

66
00:03:25,830 --> 00:03:26,663
‫And if we want it,

67
00:03:26,663 --> 00:03:30,210
‫we could just grab this piece of code right here,

68
00:03:30,210 --> 00:03:35,210
‫and run it inside of our console, make it a bit bigger.

69
00:03:35,280 --> 00:03:39,300
‫And yeah, indeed we are missing the key somewhere there,

70
00:03:39,300 --> 00:03:41,500
‫but nevermind, we will fix that in a minute.

71
00:03:42,390 --> 00:03:46,290
‫And so indeed here, we get that array from one to 20.

72
00:03:46,290 --> 00:03:47,160
‫All right.

73
00:03:47,160 --> 00:03:51,630
‫And now all we need to do, is to again use the map method,

74
00:03:51,630 --> 00:03:53,610
‫and loop over this

75
00:03:53,610 --> 00:03:56,823
‫to create our list of these option elements.

76
00:03:57,990 --> 00:04:00,180
‫So again, specifying the value,

77
00:04:00,180 --> 00:04:05,100
‫and now that value is simply numb and we need the key.

78
00:04:05,100 --> 00:04:07,530
‫And that key is also numb.

79
00:04:07,530 --> 00:04:10,080
‫So remember how that when we render a list,

80
00:04:10,080 --> 00:04:13,140
‫we need to give each of the elements a unique key.

81
00:04:13,140 --> 00:04:16,410
‫So the number here is of course, unique.

82
00:04:16,410 --> 00:04:18,093
‫And then here also numb.

83
00:04:19,830 --> 00:04:21,000
‫So give that a safe,

84
00:04:21,000 --> 00:04:23,700
‫which makes this a little bit more legible.

85
00:04:23,700 --> 00:04:24,630
‫And so this option

86
00:04:24,630 --> 00:04:28,890
‫is basically just exactly what we had before here manually.

87
00:04:28,890 --> 00:04:31,800
‫But now we create that dynamically here,

88
00:04:31,800 --> 00:04:34,350
‫automatically from zero to 20.

89
00:04:34,350 --> 00:04:36,480
‫So there it is.

90
00:04:36,480 --> 00:04:38,910
‫So since we were speaking of this key here,

91
00:04:38,910 --> 00:04:42,933
‫let's also go to this list and fix the key there.

92
00:04:44,460 --> 00:04:47,220
‫So right here where we have that map,

93
00:04:47,220 --> 00:04:50,073
‫we need to also pass in the key.

94
00:04:51,690 --> 00:04:54,660
‫So that key again needs to be something unique.

95
00:04:54,660 --> 00:04:59,660
‫And what is unique here is this ID property,

96
00:05:00,570 --> 00:05:04,230
‫not yet material, that's user three.

97
00:05:04,230 --> 00:05:06,420
‫And so now these IDs are unique.

98
00:05:06,420 --> 00:05:09,243
‫And so those are the ones, we are going to use.

99
00:05:10,110 --> 00:05:12,660
‫So usually when we get an array of objects,

100
00:05:12,660 --> 00:05:15,210
‫each of these objects should have an id.

101
00:05:15,210 --> 00:05:17,250
‫So that's then the perfect candidate

102
00:05:17,250 --> 00:05:19,380
‫for using here as a key.

103
00:05:19,380 --> 00:05:20,213
‫And again,

104
00:05:20,213 --> 00:05:23,040
‫we will learn later exactly what this key is,

105
00:05:23,040 --> 00:05:24,690
‫and why it's so important.

106
00:05:24,690 --> 00:05:27,483
‫But without it, React will always complain.

107
00:05:28,980 --> 00:05:31,830
‫Alright, after reloading it, it is gone.

108
00:05:31,830 --> 00:05:34,383
‫And so let's go back to our form,

109
00:05:35,310 --> 00:05:38,940
‫and the form is actually already complete at this point.

110
00:05:38,940 --> 00:05:41,610
‫And so let's now talk about events.

111
00:05:41,610 --> 00:05:43,710
‫So basically, what we want to happen

112
00:05:43,710 --> 00:05:46,350
‫is when we click on this button here,

113
00:05:46,350 --> 00:05:48,240
‫we want this form to be submitted.

114
00:05:48,240 --> 00:05:51,900
‫And so we can then React to this form submission

115
00:05:51,900 --> 00:05:53,193
‫with an event handler.

116
00:05:54,180 --> 00:05:56,160
‫So let's do what I just said.

117
00:05:56,160 --> 00:05:58,830
‫First, let's actually create the event handler.

118
00:05:58,830 --> 00:06:01,710
‫And we will do that just like before,

119
00:06:01,710 --> 00:06:04,320
‫right in the component function.

120
00:06:04,320 --> 00:06:07,020
‫So here we create another function,

121
00:06:07,020 --> 00:06:09,320
‫and this one is typically called handleSubmit.

122
00:06:13,365 --> 00:06:14,490
‫All right?

123
00:06:14,490 --> 00:06:15,870
‫And now all we need to do

124
00:06:15,870 --> 00:06:18,930
‫is to listen for that submit event.

125
00:06:18,930 --> 00:06:21,360
‫So how do you think we do that?

126
00:06:21,360 --> 00:06:24,120
‫Well, we go right here to this form,

127
00:06:24,120 --> 00:06:26,253
‫and then we add onSubmit.

128
00:06:28,104 --> 00:06:29,460
‫And then all we need to do

129
00:06:29,460 --> 00:06:33,930
‫is to pass in the handleSubmit function

130
00:06:33,930 --> 00:06:35,430
‫that we just created.

131
00:06:35,430 --> 00:06:38,580
‫And again, really, really important to understand

132
00:06:38,580 --> 00:06:41,490
‫is that we don't call the function here.

133
00:06:41,490 --> 00:06:43,080
‫So we don't do this.

134
00:06:43,080 --> 00:06:46,170
‫Instead React, we'll call the function for us

135
00:06:46,170 --> 00:06:49,410
‫as soon as the onSubmit event happens.

136
00:06:49,410 --> 00:06:53,790
‫Now, when exactly is that submit event going to happen?

137
00:06:53,790 --> 00:06:57,453
‫Well simply as soon as we click here on this button.

138
00:06:58,890 --> 00:07:01,230
‫But for now, of course nothing is happening,

139
00:07:01,230 --> 00:07:05,880
‫because we don't have any logic in our handler function yet.

140
00:07:05,880 --> 00:07:08,610
‫Now another way in which a form can be submitted

141
00:07:08,610 --> 00:07:10,110
‫is by hitting the enter key,

142
00:07:10,110 --> 00:07:12,720
‫while we are here in the submit.

143
00:07:12,720 --> 00:07:14,550
‫So when I'm here and I hit enter,

144
00:07:14,550 --> 00:07:17,970
‫then you see that the form got submitted actually.

145
00:07:17,970 --> 00:07:21,750
‫So maybe you saw that there was a brief flash of reloading,

146
00:07:21,750 --> 00:07:25,530
‫and that's just a normal behavior of forms in HTML.

147
00:07:25,530 --> 00:07:28,830
‫So that has nothing to do with React.

148
00:07:28,830 --> 00:07:32,043
‫Now let's just do this one more time, so I can show you.

149
00:07:32,880 --> 00:07:37,020
‫So writing test, and then submitting, watch what happens.

150
00:07:37,020 --> 00:07:38,730
‫So as I told you before,

151
00:07:38,730 --> 00:07:40,950
‫there was like a brief flash,

152
00:07:40,950 --> 00:07:43,260
‫and then the page actually reloaded.

153
00:07:43,260 --> 00:07:45,960
‫And so the text that we got here is gone.

154
00:07:45,960 --> 00:07:46,793
‫Now remember

155
00:07:46,793 --> 00:07:50,190
‫that whole conversation about the single page application.

156
00:07:50,190 --> 00:07:53,310
‫Where I mentioned that in a single page application,

157
00:07:53,310 --> 00:07:55,620
‫like we want to build with React,

158
00:07:55,620 --> 00:07:59,340
‫we usually can submit a form without the page reloading.

159
00:07:59,340 --> 00:08:01,380
‫So in other words, what we want

160
00:08:01,380 --> 00:08:03,930
‫is for this page not to reload.

161
00:08:03,930 --> 00:08:07,743
‫And so we need to disable this default behavior of HTML.

162
00:08:09,000 --> 00:08:12,933
‫So the way we do that is to accept the event here.

163
00:08:14,310 --> 00:08:18,143
‫And then here, we can use event.preventDefault.

164
00:08:20,100 --> 00:08:23,700
‫And again, this is normal JavaScript right here.

165
00:08:23,700 --> 00:08:26,220
‫So if you're used to working with forms

166
00:08:26,220 --> 00:08:27,720
‫in Vanilla JavaScript,

167
00:08:27,720 --> 00:08:29,913
‫then you probably have seen this before.

168
00:08:31,830 --> 00:08:35,310
‫So let's see what happens now when we submit,

169
00:08:35,310 --> 00:08:37,050
‫yeah then nothing happens.

170
00:08:37,050 --> 00:08:39,720
‫So that's actually exactly what we want now.

171
00:08:39,720 --> 00:08:41,340
‫We want no reload.

172
00:08:41,340 --> 00:08:43,890
‫So we want to stay here on the same page.

173
00:08:43,890 --> 00:08:46,923
‫So building a single page application.

174
00:08:47,760 --> 00:08:52,290
‫Now what's with this E here actually, how does it get here?

175
00:08:52,290 --> 00:08:55,320
‫Well as soon as the submit event happens,

176
00:08:55,320 --> 00:08:58,170
‫React will call this handleSubmit function.

177
00:08:58,170 --> 00:08:59,430
‫And when it does so,

178
00:08:59,430 --> 00:09:03,120
‫it will pass into the function, the event object.

179
00:09:03,120 --> 00:09:04,830
‫So an object with all the information

180
00:09:04,830 --> 00:09:06,720
‫about the current event.

181
00:09:06,720 --> 00:09:08,040
‫So again, that's very similar

182
00:09:08,040 --> 00:09:10,953
‫to what happens already in Vanilla JavaScript.

183
00:09:12,390 --> 00:09:15,783
‫So here we could also basically write this.

184
00:09:17,280 --> 00:09:19,140
‫So this would be exactly the same,

185
00:09:19,140 --> 00:09:22,170
‫but it's then a bit more obvious what happens.

186
00:09:22,170 --> 00:09:24,840
‫So here this function gets the event,

187
00:09:24,840 --> 00:09:27,963
‫and then we call handleSubmit with that event.

188
00:09:28,800 --> 00:09:30,660
‫But that's kind of redundant.

189
00:09:30,660 --> 00:09:31,983
‫So let's remove that.

190
00:09:33,420 --> 00:09:36,630
‫So let's just quickly recap what we did here,

191
00:09:36,630 --> 00:09:38,670
‫which was actually not a lot,

192
00:09:38,670 --> 00:09:42,540
‫but it's still important to understand what happened here.

193
00:09:42,540 --> 00:09:46,770
‫So first of all, we just created a, or form elements,

194
00:09:46,770 --> 00:09:48,180
‫and then the important part

195
00:09:48,180 --> 00:09:51,120
‫is that we are listening now for the submit event,

196
00:09:51,120 --> 00:09:52,890
‫that happens on the form.

197
00:09:52,890 --> 00:09:55,320
‫And that event happens on the form

198
00:09:55,320 --> 00:09:57,240
‫as soon as we click this button,

199
00:09:57,240 --> 00:09:58,890
‫or as soon as we hit enter

200
00:09:58,890 --> 00:10:01,470
‫while we are in this input element.

201
00:10:01,470 --> 00:10:06,150
‫And again, that is just some normal behavior of HTML.

202
00:10:06,150 --> 00:10:10,410
‫Now we could also not listen to the submit event,

203
00:10:10,410 --> 00:10:14,100
‫and instead listen for on click right here.

204
00:10:14,100 --> 00:10:17,880
‫So we could do like this, net end for example,

205
00:10:17,880 --> 00:10:20,013
‫create a function, handleClick.

206
00:10:21,780 --> 00:10:24,060
‫So instead of handleSubmit.

207
00:10:24,060 --> 00:10:25,530
‫So that would also work,

208
00:10:25,530 --> 00:10:29,130
‫but it would only work on the click of the button.

209
00:10:29,130 --> 00:10:33,450
‫So that would then not work, when we hit enter while here.

210
00:10:33,450 --> 00:10:35,100
‫But we do actually want that.

211
00:10:35,100 --> 00:10:39,330
‫And so let's instead, listen for the submit event.

212
00:10:39,330 --> 00:10:43,383
‫And by doing so, we are leveraging the power of HTML forms.

213
00:10:44,460 --> 00:10:45,570
‫Now the next question

214
00:10:45,570 --> 00:10:49,500
‫is how do we actually get this data from the form

215
00:10:49,500 --> 00:10:52,350
‫into this event handler, right?

216
00:10:52,350 --> 00:10:53,880
‫Because of course the goal

217
00:10:53,880 --> 00:10:56,130
‫is to do something with this data.

218
00:10:56,130 --> 00:10:59,793
‫So with this quantity and with this item description.

219
00:11:00,630 --> 00:11:03,240
‫Well there are multiple ways of doing so.

220
00:11:03,240 --> 00:11:06,753
‫So we could get that data right from the event object.

221
00:11:07,590 --> 00:11:09,360
‫So let's just see,

222
00:11:09,360 --> 00:11:14,360
‫we could like log this event to the console.

223
00:11:14,580 --> 00:11:15,880
‫So let's see what happens.

224
00:11:17,070 --> 00:11:20,100
‫So here we get this synthetic base event,

225
00:11:20,100 --> 00:11:21,030
‫and we will talk about

226
00:11:21,030 --> 00:11:24,390
‫what this synthetic event is a bit later.

227
00:11:24,390 --> 00:11:26,670
‫But you see that here we get the target.

228
00:11:26,670 --> 00:11:30,720
‫So basically the element on which the event was fired.

229
00:11:30,720 --> 00:11:32,820
‫And then there we have, for example,

230
00:11:32,820 --> 00:11:36,330
‫the input on which we can see the value.

231
00:11:36,330 --> 00:11:40,380
‫So test is exactly what we have here, right?

232
00:11:40,380 --> 00:11:43,440
‫However in React, we usually don't do this.

233
00:11:43,440 --> 00:11:46,860
‫Instead, we use something called controlled elements.

234
00:11:46,860 --> 00:11:49,590
‫But that's a topic for a whole new video.

235
00:11:49,590 --> 00:11:52,683
‫And so let's now take a break and come back in a second.