Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,100 --> 00:00:03,800
Now, for all of that,
2
00:00:03,800 --> 00:00:07,090
let's come back to this simple input component,
3
00:00:07,090 --> 00:00:10,580
and let's start with getting the user input here.
4
00:00:10,580 --> 00:00:13,240
And let's then also validate that input
5
00:00:13,240 --> 00:00:16,610
and potentially show an error message to the user.
6
00:00:16,610 --> 00:00:18,510
And then we're going to explore
7
00:00:18,510 --> 00:00:20,660
the different ways of validating.
8
00:00:20,660 --> 00:00:24,230
So the different triggers for validating,
9
00:00:24,230 --> 00:00:26,720
to find out where the differences are,
10
00:00:26,720 --> 00:00:29,963
and how we might best be able to combine everything.
11
00:00:30,850 --> 00:00:34,000
So let's start with fetching the entered value,
12
00:00:34,000 --> 00:00:35,410
the user input.
13
00:00:35,410 --> 00:00:38,850
And there are two main ways for doing that.
14
00:00:38,850 --> 00:00:41,320
We can listen on every keystroke
15
00:00:41,320 --> 00:00:46,090
and store the value in some state variable, so to say,
16
00:00:46,090 --> 00:00:48,600
or we use a ref to fetch the input
17
00:00:48,600 --> 00:00:51,940
once the user is done typing in a value.
18
00:00:51,940 --> 00:00:53,370
And I'll show both here.
19
00:00:53,370 --> 00:00:54,710
Of course, in reality,
20
00:00:54,710 --> 00:00:57,780
you would only use one of the two approaches,
21
00:00:57,780 --> 00:00:59,210
but here I'll use both.
22
00:00:59,210 --> 00:01:04,209
And hence I will import use ref and use state from react.
23
00:01:06,670 --> 00:01:09,670
And then here, we'll start with state.
24
00:01:09,670 --> 00:01:13,023
I can set up a new state, my entered name, let's say,
25
00:01:14,950 --> 00:01:16,770
by calling use state.
26
00:01:16,770 --> 00:01:18,853
And initially it's an empty string.
27
00:01:20,250 --> 00:01:22,780
And then we can update this entered name
28
00:01:22,780 --> 00:01:26,060
with set entered name on every keystroke,
29
00:01:26,060 --> 00:01:31,020
or on every change that occurs here on this input element.
30
00:01:31,020 --> 00:01:36,020
So here we can add a name input change handler,
31
00:01:38,170 --> 00:01:42,470
such a function, which receives the default event object.
32
00:01:42,470 --> 00:01:46,370
That's how JavaScript in the browser behaves.
33
00:01:46,370 --> 00:01:48,560
Once we bind this function
34
00:01:48,560 --> 00:01:50,670
to the on change event on the input,
35
00:01:50,670 --> 00:01:54,790
we automatically get an event object describing the event.
36
00:01:54,790 --> 00:01:58,020
And from there, we can get the entered value.
37
00:01:58,020 --> 00:02:00,180
And therefore, we'll be able to
38
00:02:00,180 --> 00:02:04,910
set the entered name to event.target.value.
39
00:02:04,910 --> 00:02:06,820
And that's vanilla JavaScript
40
00:02:06,820 --> 00:02:09,350
that we have access to this entered value
41
00:02:09,350 --> 00:02:12,820
on the event target, which will be this input.
42
00:02:12,820 --> 00:02:15,210
And event target will be this input,
43
00:02:15,210 --> 00:02:20,210
because we can now bind the name input change handler here
44
00:02:20,980 --> 00:02:22,820
to the on change event.
45
00:02:22,820 --> 00:02:25,150
So that on every keystroke, this is fired,
46
00:02:25,150 --> 00:02:28,163
and hence the entered name state is updated.
47
00:02:29,170 --> 00:02:31,800
Then we can add a second function here,
48
00:02:31,800 --> 00:02:35,750
the form submission handler.
49
00:02:35,750 --> 00:02:38,030
And this as the name implies is triggered
50
00:02:38,030 --> 00:02:40,130
once the form is submitted.
51
00:02:40,130 --> 00:02:42,560
And there we also will get an event object
52
00:02:42,560 --> 00:02:44,840
because I'll bind this function
53
00:02:44,840 --> 00:02:48,483
to on submit on this form, like this.
54
00:02:49,870 --> 00:02:51,890
Now, here's one very important thing here
55
00:02:51,890 --> 00:02:53,370
you have to watch out for.
56
00:02:53,370 --> 00:02:55,510
And that is that on event,
57
00:02:55,510 --> 00:02:58,173
you should call prevent default here,
58
00:02:59,050 --> 00:03:02,550
because again, we're dealing with some vanilla JavaScript
59
00:03:02,550 --> 00:03:04,310
and browser behavior.
60
00:03:04,310 --> 00:03:07,600
And the default behavior by the browser is
61
00:03:07,600 --> 00:03:10,040
that if a form is submitted with a button
62
00:03:10,040 --> 00:03:15,040
instead of a form, a HTTP request is sent to the server
63
00:03:15,230 --> 00:03:17,280
serving this website.
64
00:03:17,280 --> 00:03:19,060
That happens automatically.
65
00:03:19,060 --> 00:03:21,170
The browser does this automatically.
66
00:03:21,170 --> 00:03:24,210
It sends an HTTP request to the server,
67
00:03:24,210 --> 00:03:26,670
which is serving this website.
68
00:03:26,670 --> 00:03:29,290
The problem with that is that here,
69
00:03:29,290 --> 00:03:30,920
we don't really have a server
70
00:03:30,920 --> 00:03:33,840
that wants to do anything with that request,
71
00:03:33,840 --> 00:03:35,450
we just have a static server
72
00:03:35,450 --> 00:03:39,200
that serves our JavaScript and HTML files.
73
00:03:39,200 --> 00:03:41,980
So we don't want this request to be sent,
74
00:03:41,980 --> 00:03:43,850
and hence on this event object,
75
00:03:43,850 --> 00:03:47,170
which we get automatically passed into this function
76
00:03:47,170 --> 00:03:50,740
since we've bounded to on submit, on this event object,
77
00:03:50,740 --> 00:03:54,070
we can call prevent default to tell the browser
78
00:03:54,070 --> 00:03:56,870
to not do that default behavior,
79
00:03:56,870 --> 00:04:01,870
to not send this HTTP request, and instead to do nothing.
80
00:04:02,400 --> 00:04:03,400
And we need to do that
81
00:04:03,400 --> 00:04:06,280
because if that HTTP request would be sent,
82
00:04:06,280 --> 00:04:09,910
it would lead to the page being reloaded in the end,
83
00:04:09,910 --> 00:04:12,050
and we definitely don't want that,
84
00:04:12,050 --> 00:04:16,000
because that would restart the entire react application,
85
00:04:16,000 --> 00:04:18,200
we would lose all our state,
86
00:04:18,200 --> 00:04:21,882
and we would definitely not have the behavior we want.
87
00:04:22,970 --> 00:04:24,910
So that's important.
88
00:04:24,910 --> 00:04:27,780
Then as a next step, now that we can guarantee
89
00:04:27,780 --> 00:04:29,730
that the page won't be reloaded
90
00:04:29,730 --> 00:04:32,270
and the app won't be restarted,
91
00:04:32,270 --> 00:04:36,270
we can console log the entered name.
92
00:04:36,270 --> 00:04:38,930
So the last name we stored
93
00:04:38,930 --> 00:04:41,563
because of our input change handler.
94
00:04:42,700 --> 00:04:44,453
And if we now saved at all,
95
00:04:46,150 --> 00:04:51,150
and I go to my console here, I can type Maximillian here.
96
00:04:53,600 --> 00:04:57,033
And if I hit submit, that gets logged to the console.
97
00:04:58,260 --> 00:05:00,720
Now, the alternative approach would have been
98
00:05:00,720 --> 00:05:03,290
to just set a ref on the input
99
00:05:03,290 --> 00:05:06,680
and read the value from the input when we need it.
100
00:05:06,680 --> 00:05:10,000
So since I'm importing use ref, we can implement this
101
00:05:10,000 --> 00:05:14,140
by adding a name input ref constant, for example,
102
00:05:14,140 --> 00:05:17,760
and assigning the value of calling use ref to it.
103
00:05:17,760 --> 00:05:20,120
And then we set name input ref
104
00:05:20,120 --> 00:05:24,390
as a ref to this input with the special ref prop
105
00:05:24,390 --> 00:05:29,390
which react allows us to set on any HTML element.
106
00:05:29,680 --> 00:05:34,680
And here I then set name input ref as a ref.
107
00:05:36,470 --> 00:05:40,460
And now with that ref set up, when the form is submitted,
108
00:05:40,460 --> 00:05:44,420
we could have also gotten this entered value
109
00:05:44,420 --> 00:05:47,590
by reaching out to the name input ref,
110
00:05:47,590 --> 00:05:49,610
and accessing current.
111
00:05:49,610 --> 00:05:53,740
On react refs, you always have a current property
112
00:05:53,740 --> 00:05:58,560
because refs are always objects with a current property,
113
00:05:58,560 --> 00:06:01,030
and it's this current property
114
00:06:01,030 --> 00:06:04,260
which then holds the value you assigned to this ref.
115
00:06:04,260 --> 00:06:07,810
So in this case, a pointer at this input element,
116
00:06:07,810 --> 00:06:09,470
that would be stored in current.
117
00:06:09,470 --> 00:06:12,120
So since the value and current is that pointer
118
00:06:12,120 --> 00:06:16,500
at the input element, we can also access.value here
119
00:06:16,500 --> 00:06:19,430
because input elements in JavaScript,
120
00:06:19,430 --> 00:06:21,980
the JavaScript objects representing
121
00:06:21,980 --> 00:06:26,230
these HTML input elements always have a value property
122
00:06:26,230 --> 00:06:30,150
which holds the value currently entered in that input.
123
00:06:30,150 --> 00:06:32,580
So that's how we can read that entered value
124
00:06:32,580 --> 00:06:34,510
from that input.
125
00:06:34,510 --> 00:06:37,360
And we can store it as an entered value,
126
00:06:37,360 --> 00:06:42,360
and then simply output this here.
127
00:06:44,500 --> 00:06:48,540
And if I do that and I reload and I type max,
128
00:06:48,540 --> 00:06:52,380
we see max twice, the first output is coming from our state,
129
00:06:52,380 --> 00:06:54,143
the second output from our ref.
130
00:06:55,050 --> 00:06:58,110
Now, in reality, you, of course, wouldn't do both.
131
00:06:58,110 --> 00:07:00,410
You would do one of the two approaches,
132
00:07:00,410 --> 00:07:03,830
either every keystroke logging with the state,
133
00:07:03,830 --> 00:07:07,240
or something similar, or you use a ref
134
00:07:07,240 --> 00:07:09,620
to read the value when you need it.
135
00:07:09,620 --> 00:07:12,750
Now, how do you decide which one to use?
136
00:07:12,750 --> 00:07:16,890
It depends what you plan to do with the entered value.
137
00:07:16,890 --> 00:07:20,280
If you are only interested in it once
138
00:07:20,280 --> 00:07:23,740
when the form is submitted, a ref might be better
139
00:07:23,740 --> 00:07:26,230
because logging and updating the state value
140
00:07:26,230 --> 00:07:29,610
with every keystroke is a bit overkill then.
141
00:07:29,610 --> 00:07:30,920
You don't need to do that
142
00:07:30,920 --> 00:07:33,970
if you only want the value once.
143
00:07:33,970 --> 00:07:37,920
However, if you of course need the value, the entered value
144
00:07:37,920 --> 00:07:42,430
after every keystroke, for example, for instant validation,
145
00:07:42,430 --> 00:07:44,440
then using the state is better
146
00:07:44,440 --> 00:07:46,893
because with a ref you can't really do that.
147
00:07:47,967 --> 00:07:51,340
Another reason for using a state instead of a ref could be,
148
00:07:51,340 --> 00:07:54,380
if you want to reset the entered input.
149
00:07:54,380 --> 00:07:57,560
Let's say here at the end of the form submission handler.
150
00:07:57,560 --> 00:08:01,590
There we can reset the entered name
151
00:08:01,590 --> 00:08:03,600
by calling set entered name
152
00:08:03,600 --> 00:08:05,670
and setting this to an empty string.
153
00:08:05,670 --> 00:08:10,670
And all we now need to do is bind the entered value
154
00:08:10,740 --> 00:08:13,723
back to the input through the value prop.
155
00:08:14,630 --> 00:08:19,060
The entered name is now bound to the value prop on input.
156
00:08:19,060 --> 00:08:21,290
And hence, if we update the entered name,
157
00:08:21,290 --> 00:08:23,370
that will be reflected here.
158
00:08:23,370 --> 00:08:26,123
This works great when using state,
159
00:08:28,470 --> 00:08:31,410
but it's not really possible with refs,
160
00:08:31,410 --> 00:08:33,700
at least not as elegant.
161
00:08:33,700 --> 00:08:37,760
With refs, you could also use your ref
162
00:08:37,760 --> 00:08:42,740
and access the input element which is stored in that ref,
163
00:08:42,740 --> 00:08:45,930
and set value equal to an empty string.
164
00:08:45,930 --> 00:08:48,780
But this is not an ideal way of doing it.
165
00:08:48,780 --> 00:08:53,780
It works, if I comment out this, it works as you can tell,
166
00:08:55,470 --> 00:08:56,440
but it's not ideal
167
00:08:56,440 --> 00:08:59,760
because we are directly manipulating the dom here,
168
00:08:59,760 --> 00:09:02,220
we're using some vanilla JavaScript code
169
00:09:02,220 --> 00:09:05,610
to directly reach out to the dom and change something there.
170
00:09:05,610 --> 00:09:09,200
And that is typically not something you should do.
171
00:09:09,200 --> 00:09:11,310
You should leave that up to react.
172
00:09:11,310 --> 00:09:14,280
React should be the only thing manipulating the dom.
173
00:09:14,280 --> 00:09:19,280
And therefore this is not ideal, don't manipulate the dom.
174
00:09:21,280 --> 00:09:24,630
You can do it and it might be okay,
175
00:09:24,630 --> 00:09:26,180
it's up to you ultimately,
176
00:09:26,180 --> 00:09:30,340
but it's not a very clean way of using react.
177
00:09:30,340 --> 00:09:33,090
So, that could be another reason for using state,
178
00:09:33,090 --> 00:09:35,650
which you'll potentially update on every keystroke,
179
00:09:35,650 --> 00:09:38,933
because maybe you want to reset the entered value.
180
00:09:39,830 --> 00:09:43,700
But that's not even the main topic of this module.
181
00:09:43,700 --> 00:09:46,200
Now we know how we can get the entered value
182
00:09:46,200 --> 00:09:48,590
and when we might want to get it.
183
00:09:48,590 --> 00:09:51,450
But this module is about more than that.
184
00:09:51,450 --> 00:09:54,580
It is mainly also about validation,
185
00:09:54,580 --> 00:09:57,220
and that's something I wanna dive in next.
186
00:09:57,220 --> 00:10:00,120
How can we validate this user input,
187
00:10:00,120 --> 00:10:02,483
and how do we best do that?
14964
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.