- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.830 --> 00:00:01.663
In this guide,
2
00:00:01.663 --> 00:00:04.460
we're gonna finish building out our form
3
00:00:04.460 --> 00:00:05.730
for logging in.
4
00:00:05.730 --> 00:00:08.080
Now, we're not gonna connect to the API quite yet
5
00:00:08.080 --> 00:00:10.450
because we need to learn a little bit more
6
00:00:10.450 --> 00:00:14.320
about how the form submission process works in React.
7
00:00:14.320 --> 00:00:15.670
So let's get started.
8
00:00:15.670 --> 00:00:19.330
I'm gonna start off by adding a password field here.
9
00:00:19.330 --> 00:00:21.980
So I'm gonna start by creating a piece
10
00:00:21.980 --> 00:00:24.270
of state called password
11
00:00:24.270 --> 00:00:27.790
along with a setter called setPassword.
12
00:00:27.790 --> 00:00:30.980
Once again, it's gonna start off as a empty string.
13
00:00:30.980 --> 00:00:33.070
Coming down into the form itself,
14
00:00:33.070 --> 00:00:35.220
I'm gonna remove our debugging output
15
00:00:35.220 --> 00:00:40.220
for our email and then I'm gonna create a new input here,
16
00:00:40.700 --> 00:00:42.740
and it's gonna have the value
17
00:00:42.740 --> 00:00:46.550
of password and then the onChange handler
18
00:00:46.550 --> 00:00:48.643
is gonna say setPassword.
19
00:00:49.740 --> 00:00:53.840
And then the type is also gonna be of type password.
20
00:00:53.840 --> 00:00:56.030
Now, don't get this confused
21
00:00:56.030 --> 00:01:00.940
with thinking that these names are related at all
22
00:01:00.940 --> 00:01:02.910
to how we named our state.
23
00:01:02.910 --> 00:01:05.700
So if this was username,
24
00:01:05.700 --> 00:01:07.870
so if email was username,
25
00:01:07.870 --> 00:01:11.870
and username just also happened to be of type email,
26
00:01:11.870 --> 00:01:14.730
then this would still say type email.
27
00:01:14.730 --> 00:01:18.240
And if password, we use something else like security code
28
00:01:18.240 --> 00:01:19.820
or some other name,
29
00:01:19.820 --> 00:01:21.900
this would still be of type password.
30
00:01:21.900 --> 00:01:26.422
These are related to HTML input types.
31
00:01:26.422 --> 00:01:29.270
When we say type email,
32
00:01:29.270 --> 00:01:32.010
that's happening here is if we were to try
33
00:01:32.010 --> 00:01:35.060
to submit this form and we were not
34
00:01:35.060 --> 00:01:38.090
to type out a actual email address,
35
00:01:38.090 --> 00:01:42.700
so if we wouldn't have an @ symbol or a .com or .net
36
00:01:42.700 --> 00:01:44.580
or whatever our email address is,
37
00:01:44.580 --> 00:01:48.560
then the form is actually not gonna be submitted.
38
00:01:48.560 --> 00:01:50.795
There's gonna be a little popup here that comes up
39
00:01:50.795 --> 00:01:54.560
and it's gonna say you need to type in a valid email.
40
00:01:54.560 --> 00:01:57.910
That's some of what we get by using type email.
41
00:01:57.910 --> 00:01:59.680
When we say type password,
42
00:01:59.680 --> 00:02:01.910
what this does, and I'll hit Save
43
00:02:01.910 --> 00:02:03.440
and you'll see it here in a second
44
00:02:03.440 --> 00:02:05.720
is when we have type password,
45
00:02:05.720 --> 00:02:07.520
and you start typing in,
46
00:02:07.520 --> 00:02:12.270
you'll see that that's what actually obscures what the user
47
00:02:12.270 --> 00:02:14.680
can see or even more importantly,
48
00:02:14.680 --> 00:02:17.380
what anybody who may be looking over their shoulder
49
00:02:17.380 --> 00:02:19.540
or something like that would see.
50
00:02:19.540 --> 00:02:23.353
So if I were to change this to type text,
51
00:02:24.280 --> 00:02:26.340
this is kind of the standard type.
52
00:02:26.340 --> 00:02:29.010
Now, if I were to start typing it in,
53
00:02:29.010 --> 00:02:31.150
you'd be able to see everything
54
00:02:31.150 --> 00:02:32.320
that was being typed.
55
00:02:32.320 --> 00:02:34.760
So that's why we're using a password.
56
00:02:34.760 --> 00:02:38.230
So now we have a input and a password.
57
00:02:38.230 --> 00:02:40.130
So how do we wrap all this up?
58
00:02:40.130 --> 00:02:42.200
We need to take this data
59
00:02:42.200 --> 00:02:44.510
and we need to send it to our API.
60
00:02:44.510 --> 00:02:49.510
So what we need to do is build out a submission handler.
61
00:02:49.570 --> 00:02:52.460
So I'm gonna also create a button here.
62
00:02:52.460 --> 00:02:54.860
So this is gonna be a login button
63
00:02:54.860 --> 00:02:57.810
and it's just gonna be a button element
64
00:02:57.810 --> 00:03:00.650
and it's gonna be of type submit
65
00:03:01.870 --> 00:03:03.940
and then we'll just, for text,
66
00:03:03.940 --> 00:03:06.903
we'll just say that we want this to be Login.
67
00:03:07.890 --> 00:03:10.280
So now we'll have a button here
68
00:03:10.280 --> 00:03:13.380
on the screen and that's gonna give us the ability
69
00:03:13.380 --> 00:03:14.930
to log in.
70
00:03:14.930 --> 00:03:15.970
Now what we need to do
71
00:03:15.970 --> 00:03:19.940
is to create a form submit handler.
72
00:03:19.940 --> 00:03:21.370
So what React's gonna do
73
00:03:21.370 --> 00:03:24.960
is it's gonna listen for any time this button
74
00:03:24.960 --> 00:03:28.530
is pressed and then we want that to trigger a function.
75
00:03:28.530 --> 00:03:31.160
So let's actually create that function here.
76
00:03:31.160 --> 00:03:32.980
I'm gonna call it const
77
00:03:32.980 --> 00:03:34.450
and then handleSubmit
78
00:03:35.410 --> 00:03:39.020
and for right now, I'm not gonna pass in any arguments,
79
00:03:39.020 --> 00:03:41.100
which you're gonna see in a second
80
00:03:41.100 --> 00:03:43.010
is gonna lead to an error
81
00:03:43.010 --> 00:03:45.040
but it's a very important concept
82
00:03:45.040 --> 00:03:46.270
that I want you to understand.
83
00:03:46.270 --> 00:03:49.250
It's one of the most important takeaways I want you to have
84
00:03:49.250 --> 00:03:50.510
for this guide
85
00:03:50.510 --> 00:03:51.780
'cause inside of here,
86
00:03:51.780 --> 00:03:54.883
I wanna console.log out the email,
87
00:03:56.490 --> 00:03:58.510
and then the password
88
00:03:58.510 --> 00:04:00.990
just so that we can see that we have access
89
00:04:00.990 --> 00:04:04.720
to this data outside of the form itself
90
00:04:04.720 --> 00:04:06.420
because what we're gonna be doing
91
00:04:06.420 --> 00:04:09.240
is we are going to call our API
92
00:04:09.240 --> 00:04:11.560
and we're gonna pass in this data
93
00:04:11.560 --> 00:04:14.350
and then that is what we're gonna be using
94
00:04:14.350 --> 00:04:17.000
to see if we can log in or not.
95
00:04:17.000 --> 00:04:18.680
But first, we need to make sure
96
00:04:18.680 --> 00:04:20.500
that we can submit this form.
97
00:04:20.500 --> 00:04:22.830
So I'm gonna copy handleSubmit
98
00:04:22.830 --> 00:04:25.430
and then in the form element itself,
99
00:04:25.430 --> 00:04:28.940
I'm gonna call a prop called onSubmit
100
00:04:28.940 --> 00:04:33.820
and then I'm gonna pass in this handleSubmit function.
101
00:04:33.820 --> 00:04:35.360
I told you, I kinda warned you
102
00:04:35.360 --> 00:04:36.690
that this is not gonna work
103
00:04:36.690 --> 00:04:38.230
and I'm gonna show you why
104
00:04:38.230 --> 00:04:40.830
and the reason why I'm keeping this here
105
00:04:40.830 --> 00:04:42.100
and showing it to you
106
00:04:42.100 --> 00:04:47.100
is because this is a very important differentiating feature
107
00:04:47.440 --> 00:04:51.320
between React forms and standard forms
108
00:04:51.320 --> 00:04:55.860
in other frameworks, especially in HTML.
109
00:04:55.860 --> 00:04:58.630
So this is something that's specific to JavaScript,
110
00:04:58.630 --> 00:05:01.408
so whether you're working on React applications
111
00:05:01.408 --> 00:05:06.070
or Vue or just a plain vanilla JavaScript application,
112
00:05:06.070 --> 00:05:09.000
you are gonna need to understand how this works.
113
00:05:09.000 --> 00:05:12.060
So I'm gonna stretch this out a little bit
114
00:05:12.060 --> 00:05:15.120
so that you can see the URL bar up here.
115
00:05:15.120 --> 00:05:16.810
And I'll clear out the console.
116
00:05:16.810 --> 00:05:21.210
Now, if we were writing this in pure HTML,
117
00:05:21.210 --> 00:05:24.790
what HTML forms do, what the natural behavior is
118
00:05:24.790 --> 00:05:29.124
is if you were to type in your email address here
119
00:05:29.124 --> 00:05:32.830
and then a password and hit Login,
120
00:05:32.830 --> 00:05:35.070
what the expected behavior is
121
00:05:35.070 --> 00:05:37.020
is that it's actually going to try
122
00:05:37.020 --> 00:05:39.600
to make some type of call.
123
00:05:39.600 --> 00:05:42.060
It's gonna try to go to the next page.
124
00:05:42.060 --> 00:05:45.610
And the reason for that is because years ago,
125
00:05:45.610 --> 00:05:47.540
so a very long time ago,
126
00:05:47.540 --> 00:05:49.609
in the early days, before there was React
127
00:05:49.609 --> 00:05:53.060
and all these frameworks and these tools,
128
00:05:53.060 --> 00:05:56.646
the way that you would pass data from one screen
129
00:05:56.646 --> 00:06:00.450
to another or from one HTML document to another
130
00:06:00.450 --> 00:06:02.520
was you would put it in a form
131
00:06:02.520 --> 00:06:05.660
and then you would have some type of button
132
00:06:05.660 --> 00:06:06.750
that you would press
133
00:06:06.750 --> 00:06:10.000
and that data would be submitted and it would be passed
134
00:06:10.000 --> 00:06:11.223
to that next page.
135
00:06:11.223 --> 00:06:15.000
It'd actually be passed and wrapped up all up here
136
00:06:15.000 --> 00:06:16.410
in the URL bar.
137
00:06:16.410 --> 00:06:18.410
So if I hit Login,
138
00:06:18.410 --> 00:06:20.840
I want you to pay attention up here
139
00:06:20.840 --> 00:06:23.360
to the little favicon and watch what happens.
140
00:06:23.360 --> 00:06:27.298
So if I hit Login, notice that it actually attempted
141
00:06:27.298 --> 00:06:30.219
to go to another page.
142
00:06:30.219 --> 00:06:32.490
It reloaded the page
143
00:06:32.490 --> 00:06:34.290
but remember, with React,
144
00:06:34.290 --> 00:06:36.800
we shouldn't have to reload the page.
145
00:06:36.800 --> 00:06:38.930
It's a single-page application.
146
00:06:38.930 --> 00:06:40.900
We should simply update state
147
00:06:40.900 --> 00:06:43.380
and if we need to navigate to a different page,
148
00:06:43.380 --> 00:06:45.960
then we use a tool like React Router,
149
00:06:45.960 --> 00:06:50.230
but because we just had handleSubmit
150
00:06:50.230 --> 00:06:51.930
as a normal function here,
151
00:06:51.930 --> 00:06:53.750
and we pressed that button,
152
00:06:53.750 --> 00:06:55.470
it tried to go to a different page
153
00:06:55.470 --> 00:06:56.410
and you'll even notice,
154
00:06:56.410 --> 00:06:59.060
it put this little question mark at the end.
155
00:06:59.060 --> 00:07:02.620
That is the expected HTML form behavior.
156
00:07:02.620 --> 00:07:05.100
So how do we not do that?
157
00:07:05.100 --> 00:07:07.220
I'm gonna get rid of this question mark
158
00:07:07.220 --> 00:07:09.390
and I'm just gonna go to Admin login
159
00:07:09.390 --> 00:07:11.880
and I'm gonna show you how we can fix that.
160
00:07:11.880 --> 00:07:15.380
It actually has to deal with the event once again.
161
00:07:15.380 --> 00:07:17.280
So I'm gonna go to handleSubmit
162
00:07:17.280 --> 00:07:19.970
and inside of this paren,
163
00:07:19.970 --> 00:07:21.660
I'm gonna say evt,
164
00:07:21.660 --> 00:07:24.710
once again you could say e, you could say event,
165
00:07:24.710 --> 00:07:26.070
you could call it whatever you want.
166
00:07:26.070 --> 00:07:30.990
Evt is shorthand and so I'm gonna say evt.preventDefault
167
00:07:34.070 --> 00:07:36.090
and call that function.
168
00:07:36.090 --> 00:07:37.890
So what is happening here
169
00:07:37.890 --> 00:07:41.900
is even though it is silently occurring,
170
00:07:41.900 --> 00:07:44.350
when we are pressing on Submit
171
00:07:44.350 --> 00:07:46.130
or when onSubmit is called,
172
00:07:46.130 --> 00:07:48.840
it's actually behind the scenes,
173
00:07:48.840 --> 00:07:53.100
it's passing this event to our handleSubmit function.
174
00:07:53.100 --> 00:07:55.140
So it's almost kinda like we are writing
175
00:07:55.140 --> 00:07:57.150
this code like this.
176
00:07:57.150 --> 00:08:00.510
We're saying evt and then call this function
177
00:08:00.510 --> 00:08:03.330
and then pass in the event.
178
00:08:03.330 --> 00:08:06.280
Now, we don't have to write that out manually
179
00:08:06.280 --> 00:08:10.050
because if it's only passing in one piece of data,
180
00:08:10.050 --> 00:08:11.860
we can just shorthand it
181
00:08:11.860 --> 00:08:14.710
and we can say that we simply
182
00:08:14.710 --> 00:08:16.750
are passing in the name of the function.
183
00:08:16.750 --> 00:08:19.100
So any time you see that syntax,
184
00:08:19.100 --> 00:08:21.372
that is what is occurring.
185
00:08:21.372 --> 00:08:23.350
Okay, so let's hit Save now
186
00:08:23.350 --> 00:08:26.220
and now let's come and see what happens.
187
00:08:26.220 --> 00:08:28.430
I'm going to clear out the console,
188
00:08:28.430 --> 00:08:30.164
let's type in an email address
189
00:08:30.164 --> 00:08:34.070
and a password and hit Login.
190
00:08:34.070 --> 00:08:38.130
Notice, the page did not try to go to a different page.
191
00:08:38.130 --> 00:08:40.580
So nothing else there happened.
192
00:08:40.580 --> 00:08:43.760
And that's the name of the function.
193
00:08:43.760 --> 00:08:48.300
We're preventing the default behavior of HTML forms.
194
00:08:48.300 --> 00:08:49.700
Now, if you scroll up,
195
00:08:49.700 --> 00:08:51.990
and you don't have to worry about these dev tools,
196
00:08:51.990 --> 00:08:56.990
those are simply things that my Chrome extensions are using,
197
00:08:57.010 --> 00:08:59.080
but if you scroll up here at the top,
198
00:08:59.080 --> 00:09:01.240
you'll see that it printed out the email
199
00:09:01.240 --> 00:09:02.760
and the password values,
200
00:09:02.760 --> 00:09:05.770
which means that this function has the ability
201
00:09:05.770 --> 00:09:08.670
to reach in and grab the data it needs
202
00:09:08.670 --> 00:09:12.000
in order to send it to the API.
203
00:09:12.000 --> 00:09:13.750
So great job if you went through that.
204
00:09:13.750 --> 00:09:16.030
You now should be a little bit more familiar
205
00:09:16.030 --> 00:09:19.993
with how to work with HTML forms in React.