Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,160 --> 00:00:03,740
Lets continue with this app.
2
00:00:03,740 --> 00:00:06,840
And let's make sure we actually fetch user input,
3
00:00:06,840 --> 00:00:08,690
so that we can then, in the next step,
4
00:00:08,690 --> 00:00:11,980
also render it as part of a list of users.
5
00:00:11,980 --> 00:00:13,770
We got our AddUser Component here,
6
00:00:13,770 --> 00:00:15,967
with the addUserHandler, which is triggered
7
00:00:15,967 --> 00:00:17,960
when the form is submitted.
8
00:00:17,960 --> 00:00:22,120
And now the goal is to collect the two entered values,
9
00:00:22,120 --> 00:00:24,060
the username and the age.
10
00:00:24,060 --> 00:00:26,060
And utilize them here.
11
00:00:26,060 --> 00:00:29,070
Now to collect the values, we can use a technique
12
00:00:29,070 --> 00:00:31,790
we already learned about in the last modules.
13
00:00:31,790 --> 00:00:34,478
We can use State Management in React,
14
00:00:34,478 --> 00:00:37,710
to update the state with every keystroke
15
00:00:37,710 --> 00:00:40,318
and hence save what the user enters,
16
00:00:40,318 --> 00:00:42,910
in such a state variable.
17
00:00:42,910 --> 00:00:45,420
Which is then managed by React.
18
00:00:45,420 --> 00:00:48,670
For that, we need to import the useState hook here,
19
00:00:48,670 --> 00:00:50,550
inside of the AddUser Component.
20
00:00:50,550 --> 00:00:52,283
And then we need to initialize it.
21
00:00:52,283 --> 00:00:55,810
For that, we call useState and we can define
22
00:00:55,810 --> 00:00:58,393
the default, the initial starting state.
23
00:00:59,350 --> 00:01:01,810
And since I want to manage one piece of state
24
00:01:01,810 --> 00:01:03,970
for every input, the starting state
25
00:01:03,970 --> 00:01:06,207
will basically be, no input.
26
00:01:06,207 --> 00:01:08,520
So an empty string.
27
00:01:08,520 --> 00:01:13,420
And then I have my enteredUsername here.
28
00:01:13,420 --> 00:01:17,150
And my state updating function, setEnteredUsername.
29
00:01:19,570 --> 00:01:21,794
Now, in case you're not sure what this syntax means,
30
00:01:21,794 --> 00:01:24,460
make sure you go through the respective lectures
31
00:01:24,460 --> 00:01:26,250
in the basics module.
32
00:01:26,250 --> 00:01:27,870
This is a JavaScript syntax,
33
00:01:27,870 --> 00:01:30,150
which is called array de-structuring
34
00:01:30,150 --> 00:01:32,790
and we use it, because useState always
35
00:01:32,790 --> 00:01:35,500
returns an array with exactly two elements.
36
00:01:35,500 --> 00:01:37,950
And with this syntax, we're pulling these elements
37
00:01:37,950 --> 00:01:39,160
out of that returned array.
38
00:01:39,160 --> 00:01:41,170
And we store them in separate constants,
39
00:01:41,170 --> 00:01:44,570
of the name enteredUsername and setEnteredUsername.
40
00:01:44,570 --> 00:01:47,070
And I chose those names for those constants,
41
00:01:47,070 --> 00:01:50,050
because the first element of that returned array,
42
00:01:50,050 --> 00:01:51,800
is the current state snapshot.
43
00:01:51,800 --> 00:01:54,370
And every time this Component re-renders,
44
00:01:54,370 --> 00:01:56,496
which it, for example, does when the state is updated,
45
00:01:56,496 --> 00:02:00,437
this concept will hold the latest state snapshot
46
00:02:00,437 --> 00:02:03,340
and setEnteredUsername on the other hand,
47
00:02:03,340 --> 00:02:05,070
holds a function which we can call,
48
00:02:05,070 --> 00:02:07,890
to change that state and to then trigger
49
00:02:07,890 --> 00:02:10,350
such a re-render cycle.
50
00:02:10,350 --> 00:02:12,130
So now, we need a function which is triggered
51
00:02:12,130 --> 00:02:14,335
on every keystroke of that input here.
52
00:02:14,335 --> 00:02:15,925
And for that, I'll have my
53
00:02:15,925 --> 00:02:19,940
usernameChangeHandler function for example,
54
00:02:19,940 --> 00:02:22,060
where I get the event object,
55
00:02:22,060 --> 00:02:25,010
because we'll listen to a default DOM event
56
00:02:25,010 --> 00:02:27,360
and such events will dispatch objects
57
00:02:27,360 --> 00:02:29,872
with more information and we can bind
58
00:02:29,872 --> 00:02:33,264
this to input here, for the onChange prop.
59
00:02:33,264 --> 00:02:37,250
Which then will tie this to the change event listener.
60
00:02:37,250 --> 00:02:40,270
So here I pass my usernameChangeHandler
61
00:02:40,270 --> 00:02:42,210
and therefore, this function will be triggered
62
00:02:42,210 --> 00:02:45,650
for every keystroke in the input element, down there.
63
00:02:45,650 --> 00:02:49,150
And now, here I will call setEnteredUsername
64
00:02:49,150 --> 00:02:52,170
and I wanna set it to what the user currently entered.
65
00:02:52,170 --> 00:02:54,510
And we can get that entered value,
66
00:02:54,510 --> 00:02:57,250
with the help of that event object.
67
00:02:57,250 --> 00:02:59,230
Because there we can access the target of the event,
68
00:02:59,230 --> 00:03:00,690
which is the input.
69
00:03:00,690 --> 00:03:03,030
And then the value property of that input,
70
00:03:03,030 --> 00:03:04,893
to get the currently entered value.
71
00:03:06,280 --> 00:03:08,670
Now I'll just copy that and repeat that,
72
00:03:08,670 --> 00:03:11,100
to also have a ageChangeHandler,
73
00:03:11,100 --> 00:03:12,450
where I call setEnteredAge,
74
00:03:16,650 --> 00:03:18,500
because that's the second piece of state
75
00:03:18,500 --> 00:03:21,520
and I wanna manage, hence I'll duplicate this as well.
76
00:03:21,520 --> 00:03:23,920
And here I have my enteredAge and setEnteredAge.
77
00:03:28,550 --> 00:03:30,740
And with that, we're updating the enteredAge
78
00:03:30,740 --> 00:03:31,800
on every keystroke.
79
00:03:31,800 --> 00:03:33,180
We of course, also need to make
80
00:03:33,180 --> 00:03:35,016
the connection down there.
81
00:03:35,016 --> 00:03:36,943
So ageChangeHandler.
82
00:03:39,600 --> 00:03:43,870
And now we got both username and the age stored.
83
00:03:43,870 --> 00:03:46,580
Now, in addUserHandler, we can therefore now
84
00:03:46,580 --> 00:03:50,500
console.log, enteredUsername and enteredAge,
85
00:03:50,500 --> 00:03:52,770
whoops and enteredAge.
86
00:03:54,670 --> 00:03:59,110
Like this.
87
00:03:59,110 --> 00:04:00,886
And if we now save everything,
88
00:04:00,886 --> 00:04:03,560
we can go back, open up the Developer Tools here
89
00:04:03,560 --> 00:04:06,490
and go to the JavaScript console and maybe enter
90
00:04:06,490 --> 00:04:08,000
Max here and 31.
91
00:04:08,000 --> 00:04:10,803
And if I click Add User, you see that output here.
92
00:04:11,910 --> 00:04:14,710
Now at the moment, we can also submit an empty form,
93
00:04:14,710 --> 00:04:17,160
like an empty age field, but that's something
94
00:04:17,160 --> 00:04:18,329
we'll fix later.
95
00:04:18,329 --> 00:04:21,053
Generally fetching that data works.
96
00:04:21,930 --> 00:04:23,981
Now as a next step, let's make sure
97
00:04:23,981 --> 00:04:26,140
that when we click Add User,
98
00:04:26,140 --> 00:04:28,420
we actually reset these inputs,
99
00:04:28,420 --> 00:04:31,380
so that both input fields are empty again.
100
00:04:31,380 --> 00:04:32,910
And let's make sure we also have
101
00:04:32,910 --> 00:04:35,740
some basic validation, which simply makes sure
102
00:04:35,740 --> 00:04:37,677
that nothing happens, that we don't
103
00:04:37,677 --> 00:04:40,130
print this information here.
104
00:04:40,130 --> 00:04:42,430
If one of the two input fields is empty,
105
00:04:42,430 --> 00:04:46,020
or if the age is smaller than one,
106
00:04:46,020 --> 00:04:49,800
or if it's equal to zero, or smaller than zero.
107
00:04:49,800 --> 00:04:52,340
So that's something you can try on your own next.
108
00:04:52,340 --> 00:04:55,143
We'll do it together in the next lecture, of course.
8330
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.