Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,500 --> 00:00:03,750
We got a list of users,
2
00:00:03,750 --> 00:00:05,520
which we feed to users list
3
00:00:05,520 --> 00:00:07,230
but it's always an empty array.
4
00:00:07,230 --> 00:00:09,240
And that of course is pretty static
5
00:00:09,240 --> 00:00:11,723
and doesn't lead to any users being output.
6
00:00:12,670 --> 00:00:15,220
Now I wanna make sure that when we click that
7
00:00:15,220 --> 00:00:18,270
add user button and the add user component,
8
00:00:18,270 --> 00:00:21,010
we don't just log to the user data here.
9
00:00:21,010 --> 00:00:22,530
But instead we really create
10
00:00:22,530 --> 00:00:25,170
a new user object with that data,
11
00:00:25,170 --> 00:00:27,760
and we add that to an array of users object,
12
00:00:27,760 --> 00:00:30,740
which we then output in the users list.
13
00:00:30,740 --> 00:00:32,470
And how do we do that?
14
00:00:32,470 --> 00:00:33,303
Well for that,
15
00:00:33,303 --> 00:00:37,370
we need this concept which was called lifting the state up.
16
00:00:37,370 --> 00:00:40,910
We need to manage our list of users in a place,
17
00:00:40,910 --> 00:00:44,590
where we can get both access to the AddUser component
18
00:00:44,590 --> 00:00:48,890
and well get notified when that AddUser button was clicked
19
00:00:48,890 --> 00:00:50,850
as well as where we got access
20
00:00:50,850 --> 00:00:54,683
to the users list component to feed our users array into it.
21
00:00:55,780 --> 00:00:58,180
And we don't have access to UsersList
22
00:00:58,180 --> 00:01:00,000
inside of AddUser, for example.
23
00:01:00,000 --> 00:01:02,120
So managing our Userslist,
24
00:01:02,120 --> 00:01:05,043
state here would be wrong our users array.
25
00:01:05,951 --> 00:01:08,630
UsersList component sounds like the right place
26
00:01:08,630 --> 00:01:11,120
because there we need that list,
27
00:01:11,120 --> 00:01:15,600
but there we don't get access to the added user data
28
00:01:15,600 --> 00:01:19,197
that AddUser form is out of reach here.
29
00:01:19,197 --> 00:01:22,370
But actually we already configured this UsersList component
30
00:01:22,370 --> 00:01:24,990
to work differently and to get the users data
31
00:01:24,990 --> 00:01:27,440
from outside wire props.
32
00:01:27,440 --> 00:01:31,200
Because that's the place where we wanna manage our state.
33
00:01:31,200 --> 00:01:33,850
We wanna manage it in the App.js component
34
00:01:33,850 --> 00:01:35,570
because that's the one component
35
00:01:35,570 --> 00:01:37,847
above both AddUser and UsersList,
36
00:01:38,810 --> 00:01:42,610
it's the nearest component above those two components,
37
00:01:42,610 --> 00:01:44,910
which has access to both components.
38
00:01:44,910 --> 00:01:47,367
And therefore we lift the state management
39
00:01:47,367 --> 00:01:49,463
up to this App component.
40
00:01:50,730 --> 00:01:54,040
So we wanna manage our users array here,
41
00:01:54,040 --> 00:01:56,470
and we do this with the useState Hook of course,
42
00:01:56,470 --> 00:01:58,550
because it's state of this App,
43
00:01:58,550 --> 00:02:02,410
and when that state data changes, the App should rerender,
44
00:02:02,410 --> 00:02:04,580
and that's exactly what useState
45
00:02:04,580 --> 00:02:07,430
and the state managed by it does.
46
00:02:07,430 --> 00:02:10,949
And therefore here, we call useState instead of App,
47
00:02:10,949 --> 00:02:13,433
and we initialize this with an empty array.
48
00:02:14,780 --> 00:02:17,900
Now, as you learned, useState always returns two elements,
49
00:02:17,900 --> 00:02:20,340
so we can use a radius structuring,
50
00:02:20,340 --> 00:02:24,040
and we got our, let's say UsersList
51
00:02:24,040 --> 00:02:27,373
and a set UsersList function.
52
00:02:28,550 --> 00:02:32,240
And it's now the UsersList, which I wanna forward
53
00:02:32,240 --> 00:02:34,253
to the UsersList component.
54
00:02:35,200 --> 00:02:37,520
With that, it's still an empty array
55
00:02:37,520 --> 00:02:40,130
but we have a function that allows us to change
56
00:02:40,130 --> 00:02:43,220
to the array and then that change would trigger
57
00:02:43,220 --> 00:02:45,420
that App component to be rendered,
58
00:02:45,420 --> 00:02:49,070
and hence the UsersList component would be updated as well
59
00:02:49,070 --> 00:02:50,940
because it would all also be rendered
60
00:02:50,940 --> 00:02:52,833
since it's part of the App component.
61
00:02:54,030 --> 00:02:56,240
So now the missing piece is
62
00:02:56,240 --> 00:02:58,840
that when we click the AddUser button
63
00:02:58,840 --> 00:03:02,870
and hence the AddUserHandler in the AddUser component runs,
64
00:03:02,870 --> 00:03:06,436
we foreward the enteredUsername
65
00:03:06,436 --> 00:03:09,450
and the enteredAge to the App component.
66
00:03:09,450 --> 00:03:11,390
And we do this with props as well.
67
00:03:11,390 --> 00:03:13,430
You'll learn this as well.
68
00:03:13,430 --> 00:03:15,690
We can add a prop here on AddUser
69
00:03:15,690 --> 00:03:19,450
and we can name it however you want, for example, onAddUser.
70
00:03:19,450 --> 00:03:22,840
And I just use this on something convention,
71
00:03:22,840 --> 00:03:25,850
because in the end it will kind of work like an event.
72
00:03:25,850 --> 00:03:28,960
Now we'll handle it fully ourselves,
73
00:03:28,960 --> 00:03:30,760
but at the end it is like an event.
74
00:03:30,760 --> 00:03:33,080
When that AddUser button is clicked,
75
00:03:33,080 --> 00:03:35,880
which ultimately happens when I click on the button,
76
00:03:35,880 --> 00:03:40,140
surprise, surprise, then a function which we pass to
77
00:03:40,140 --> 00:03:43,070
onAddUser should be triggered.
78
00:03:43,070 --> 00:03:45,210
It's a function we have yet to define
79
00:03:45,210 --> 00:03:46,600
and we can define it here.
80
00:03:46,600 --> 00:03:50,550
The AddUserHandler here in the App component.
81
00:03:50,550 --> 00:03:54,350
And that's a function where I actually expect two arguments,
82
00:03:54,350 --> 00:03:57,440
the userName and the userAge.
83
00:03:57,440 --> 00:03:58,910
And you can name these parameters
84
00:03:58,910 --> 00:04:00,260
however you want of course.
85
00:04:01,580 --> 00:04:03,280
I expect to get that data,
86
00:04:03,280 --> 00:04:06,420
and with that data, we can create a new user
87
00:04:06,420 --> 00:04:08,910
and add it to our list here,
88
00:04:08,910 --> 00:04:13,590
by calling setUsersList and then updating the state.
89
00:04:13,590 --> 00:04:15,390
Now here, I wanna update the state,
90
00:04:15,390 --> 00:04:19,279
by taking the old list and appending a new element to it,
91
00:04:19,279 --> 00:04:21,519
And as you all learned earlier,
92
00:04:21,519 --> 00:04:25,410
when your state update relies on the previous state,
93
00:04:25,410 --> 00:04:29,560
you wanna use an alternative form of set UsersList.
94
00:04:29,560 --> 00:04:31,550
You wanna use that function form,
95
00:04:31,550 --> 00:04:35,310
where you pass a function to setUsersList.
96
00:04:35,310 --> 00:04:38,290
And that function will automatically get the previous
97
00:04:38,290 --> 00:04:43,290
latest state snapshot, when React perform state update here.
98
00:04:43,860 --> 00:04:46,073
And therefore all named at prevUsersList,
99
00:04:47,660 --> 00:04:49,230
the name is up to you.
100
00:04:49,230 --> 00:04:52,190
And you then should return your new state snapshot
101
00:04:52,190 --> 00:04:56,830
in the body of this function you pass to setUsersList.
102
00:04:56,830 --> 00:05:00,300
So here I'll return an array, a new array
103
00:05:00,300 --> 00:05:01,440
where I first of all,
104
00:05:01,440 --> 00:05:04,343
copy all elements from prevUsersList,
105
00:05:05,910 --> 00:05:08,060
and that's the spread operator which simply
106
00:05:08,060 --> 00:05:10,540
pulls all elements out of that array
107
00:05:10,540 --> 00:05:13,980
and adds them as new elements to this new array.
108
00:05:13,980 --> 00:05:16,740
And then I add one new element at the end,
109
00:05:16,740 --> 00:05:19,060
I add a new JavaScript object here,
110
00:05:19,060 --> 00:05:20,480
which should have a name field,
111
00:05:20,480 --> 00:05:23,940
uName is the value we stored there and the age field
112
00:05:23,940 --> 00:05:26,610
which stores uAge as a value.
113
00:05:26,610 --> 00:05:29,870
So the two values we get as parameters here.
114
00:05:29,870 --> 00:05:30,760
And with that,
115
00:05:30,760 --> 00:05:33,850
we treat a new JavaScript object for every user,
116
00:05:33,850 --> 00:05:37,173
and we add that to our UsersList array.
117
00:05:38,220 --> 00:05:41,890
And now we just need to wire this up, addUserHandler
118
00:05:41,890 --> 00:05:46,070
is what I pass to the onAddUser prop here
119
00:05:46,070 --> 00:05:48,620
on my AddUser component.
120
00:05:48,620 --> 00:05:50,730
And now inside of the AddUser component,
121
00:05:50,730 --> 00:05:54,000
we need to utilize this onAddUser prop.
122
00:05:54,000 --> 00:05:57,800
So here in AddUser, in the AddUserHandler there,
123
00:05:57,800 --> 00:06:00,260
so inside of the AddUser component now,
124
00:06:00,260 --> 00:06:02,060
instead of console logging,
125
00:06:02,060 --> 00:06:04,703
I will call props dot onAddUser.
126
00:06:05,741 --> 00:06:08,100
And I'll execute it as a function here,
127
00:06:08,100 --> 00:06:11,640
because I know that what I get as a value on that prop
128
00:06:11,640 --> 00:06:13,560
will be a function.
129
00:06:13,560 --> 00:06:16,760
Because we're passing a pointer at AddUserHandler
130
00:06:16,760 --> 00:06:21,420
to onAddUser and AddUserHandler is a function.
131
00:06:21,420 --> 00:06:23,640
So we can execute it as a function
132
00:06:23,640 --> 00:06:25,823
inside of the AddUser component.
133
00:06:26,930 --> 00:06:30,570
And now we just have to forward our two pieces of data,
134
00:06:30,570 --> 00:06:32,710
the enteredUsername and the enteredAge
135
00:06:34,461 --> 00:06:37,235
which we got stored in this AddUser component.
136
00:06:37,235 --> 00:06:40,080
And with that we're forwarding that entered data
137
00:06:40,080 --> 00:06:42,670
to the App component up on every click
138
00:06:42,670 --> 00:06:47,070
on the AddUser button here inside of the AddUser component.
139
00:06:47,070 --> 00:06:50,040
And I know that's a lot of AddUser and User
140
00:06:50,040 --> 00:06:52,310
but that's what this App is about in the end.
141
00:06:52,310 --> 00:06:53,470
And I want to use names.
142
00:06:53,470 --> 00:06:56,283
You would realistically also use in real Apps.
143
00:06:57,510 --> 00:07:00,080
So with that, this function is triggered,
144
00:07:00,080 --> 00:07:01,690
and if we now save everything
145
00:07:01,690 --> 00:07:06,350
we should be able to enter Max and Add User.
146
00:07:06,350 --> 00:07:09,480
Now we're getting a warning here, we'll fix this in a second
147
00:07:09,480 --> 00:07:12,823
but you can tell that this generally seems to work.
148
00:07:13,760 --> 00:07:15,260
Now, what about this warning?
149
00:07:15,260 --> 00:07:17,310
You should know what's causing this
150
00:07:17,310 --> 00:07:19,630
and you should know how to fix it.
151
00:07:19,630 --> 00:07:22,630
So here's a quick second for you to pause the video
152
00:07:22,630 --> 00:07:25,383
and fix it on your own, and then we'll fix it together.
153
00:07:27,500 --> 00:07:30,200
So do you remember what's causing this?
154
00:07:30,200 --> 00:07:32,130
It's a warning thrown by React.
155
00:07:32,130 --> 00:07:33,550
And in the end it tells us
156
00:07:33,550 --> 00:07:36,690
that every child in a list should have a "key" prop
157
00:07:36,690 --> 00:07:39,100
which has a unique value.
158
00:07:39,100 --> 00:07:42,450
React needs this to efficiently update list items
159
00:07:42,450 --> 00:07:44,093
and rerender them efficiently.
160
00:07:45,120 --> 00:07:47,270
Now we got only one list which we render
161
00:07:47,270 --> 00:07:48,630
in this whole application
162
00:07:48,630 --> 00:07:51,993
and that's ends up the UsersList here, this part.
163
00:07:52,920 --> 00:07:55,260
We create a bunch of list items here
164
00:07:55,260 --> 00:07:58,640
and that's exactly the thing that should have a "key" prop
165
00:07:58,640 --> 00:08:00,513
because it's the item you repeat.
166
00:08:01,520 --> 00:08:03,410
So here we should add a "key" prop
167
00:08:03,410 --> 00:08:06,090
and that in turn should hold a unique value.
168
00:08:06,090 --> 00:08:09,900
So something like g1 here is not valid
169
00:08:09,900 --> 00:08:12,040
because that's hard coded and to same
170
00:08:12,040 --> 00:08:14,383
for every list item that's being created.
171
00:08:15,490 --> 00:08:17,310
Instead, I think it makes sense
172
00:08:17,310 --> 00:08:20,290
that in the place where we create a user
173
00:08:20,290 --> 00:08:23,040
we don't just create a user with name and age
174
00:08:23,040 --> 00:08:25,090
but we also give it an ID.
175
00:08:25,090 --> 00:08:30,090
We give it an ID and that could be Math.random.toString
176
00:08:30,330 --> 00:08:33,023
some pseudo unique ID.
177
00:08:34,400 --> 00:08:38,919
Now, every user has an ID that is roughly unique
178
00:08:38,919 --> 00:08:42,000
and inside of our list, we can now utilize the
179
00:08:42,000 --> 00:08:47,000
this ID field so that the key is set dynamically to user.id.
180
00:08:48,640 --> 00:08:52,780
And that ID is now unique for every user.
181
00:08:52,780 --> 00:08:56,140
So if we now save this, and we retry this,
182
00:08:56,140 --> 00:08:59,040
we no longer get any warnings here
183
00:08:59,040 --> 00:09:02,460
because now this works as it should.
184
00:09:02,460 --> 00:09:04,450
And with that, we're almost done.
185
00:09:04,450 --> 00:09:07,470
The missing piece is that Modal.
186
00:09:07,470 --> 00:09:09,780
Now, it's something we haven't built before
187
00:09:09,780 --> 00:09:12,630
but even though it might seem totally different
188
00:09:12,630 --> 00:09:15,110
because it's an overlay on the entire page.
189
00:09:15,110 --> 00:09:18,900
It's actually not too far away from what we built thus far.
190
00:09:18,900 --> 00:09:20,370
So definitely give it a try
191
00:09:20,370 --> 00:09:22,370
on your own first and thereafter
192
00:09:22,370 --> 00:09:25,020
we will learn how we can build such a modal together.
15268
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.