Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,560 --> 00:00:07,260
So let's tackle our list of users next.
2
00:00:07,260 --> 00:00:10,000
Now the first important question is
3
00:00:10,000 --> 00:00:11,720
where do we wanna output?
4
00:00:11,720 --> 00:00:15,300
And the second question that depends on the first one
5
00:00:15,300 --> 00:00:19,890
is where we then actually wanna manage our list of users?
6
00:00:19,890 --> 00:00:22,520
So where do we wanna output that list?
7
00:00:22,520 --> 00:00:26,290
We get the user data here in the AddUser component
8
00:00:26,290 --> 00:00:30,350
and technically we could simply add more HTML code
9
00:00:30,350 --> 00:00:33,250
in that component to all the render a list,
10
00:00:33,250 --> 00:00:36,170
maybe here unordered list below the form.
11
00:00:36,170 --> 00:00:40,130
We could then manage our list of users with use state in
12
00:00:40,130 --> 00:00:43,720
here in AddUser and output it down there.
13
00:00:43,720 --> 00:00:45,360
That is something we could do
14
00:00:45,360 --> 00:00:48,450
and technically that would absolutely work.
15
00:00:48,450 --> 00:00:50,300
But by the way, I'm saying this,
16
00:00:50,300 --> 00:00:53,750
you already hear that this is probably not how we're going
17
00:00:53,750 --> 00:00:55,360
to do it.
18
00:00:55,360 --> 00:00:58,210
The idea in React really is that you work
19
00:00:58,210 --> 00:00:59,610
with a bunch of components
20
00:00:59,610 --> 00:01:02,181
that you have small isolated pieces
21
00:01:02,181 --> 00:01:06,480
of HTML code and logic where every component really
22
00:01:06,480 --> 00:01:08,010
has its own task,
23
00:01:08,010 --> 00:01:11,670
its own responsibility you could say.
24
00:01:11,670 --> 00:01:13,020
And therefore you wanna keep
25
00:01:13,020 --> 00:01:16,760
your components small and focused.
26
00:01:16,760 --> 00:01:19,280
You could certainly argue that a component
27
00:01:19,280 --> 00:01:20,850
that fetches user input
28
00:01:20,850 --> 00:01:24,440
and then outputs this as a list is focused enough
29
00:01:24,440 --> 00:01:26,810
but I would argue that it's better
30
00:01:26,810 --> 00:01:30,380
to have one component that fetches user input
31
00:01:30,380 --> 00:01:33,560
that's this AddUser component which we already have.
32
00:01:33,560 --> 00:01:36,650
And then we have another component that is responsible
33
00:01:36,650 --> 00:01:38,600
for outputting the list of users
34
00:01:38,600 --> 00:01:41,350
so that we split the outputting
35
00:01:41,350 --> 00:01:44,663
and the fetching logic into two different components.
36
00:01:45,580 --> 00:01:47,710
And therefore I'll add a brand new component,
37
00:01:47,710 --> 00:01:52,710
the UsersList component, like this.
38
00:01:52,920 --> 00:01:56,550
And here the UsersList component should be responsible
39
00:01:56,550 --> 00:01:59,033
for well, outputting my user data.
40
00:02:00,100 --> 00:02:01,570
Therefore, in there, of course,
41
00:02:01,570 --> 00:02:03,390
we're going to write a React component.
42
00:02:03,390 --> 00:02:05,320
So let's import React from React
43
00:02:05,320 --> 00:02:07,600
so that we can use JSX code.
44
00:02:07,600 --> 00:02:09,312
And then here we have UsersList.
45
00:02:10,500 --> 00:02:14,240
We get our props here and we'll of course export
46
00:02:14,240 --> 00:02:17,763
our component here so that we can use it in our files.
47
00:02:19,470 --> 00:02:23,470
And then here I want to in the end return an unordered list
48
00:02:23,470 --> 00:02:26,780
where I want to go through a list of users
49
00:02:26,780 --> 00:02:29,700
which I well, need to get in some way
50
00:02:29,700 --> 00:02:33,210
and output a couple of list items for every user.
51
00:02:33,210 --> 00:02:35,650
So one list item for every user.
52
00:02:35,650 --> 00:02:37,060
How does this work?
53
00:02:37,060 --> 00:02:39,840
Well, it think it makes sense to assume
54
00:02:39,840 --> 00:02:41,980
that in the UsersList component,
55
00:02:41,980 --> 00:02:46,980
we rely on props to get our actual array of users as data.
56
00:02:47,890 --> 00:02:49,900
So here between the unordered list
57
00:02:49,900 --> 00:02:52,680
we could actually use props.
58
00:02:52,680 --> 00:02:54,420
Let's say users,
59
00:02:54,420 --> 00:02:55,730
it's your component.
60
00:02:55,730 --> 00:02:59,300
So it's up to you which prop name you expect here.
61
00:02:59,300 --> 00:03:03,360
I expect to have a prop property which is named users
62
00:03:03,360 --> 00:03:06,870
and that should hold an array of user data.
63
00:03:06,870 --> 00:03:09,040
So we can use the map method
64
00:03:09,040 --> 00:03:12,810
which you learned about in the lists and conditionals module
65
00:03:12,810 --> 00:03:16,190
to map that array of users,
66
00:03:16,190 --> 00:03:19,400
queue and array of JSX elements.
67
00:03:19,400 --> 00:03:22,740
So to transform our user data to JSX elements
68
00:03:22,740 --> 00:03:25,920
which then are rendered onto the DOM.
69
00:03:25,920 --> 00:03:29,210
So map executes a function on every item
70
00:03:29,210 --> 00:03:30,710
in the user's array
71
00:03:30,710 --> 00:03:33,140
and we'll get that item as input.
72
00:03:33,140 --> 00:03:34,730
Since it's an array of users
73
00:03:34,730 --> 00:03:37,240
I'll name that single item user
74
00:03:37,240 --> 00:03:39,940
and write a anonymous arrow function here.
75
00:03:39,940 --> 00:03:42,290
And then in this anonymous arrow function
76
00:03:42,290 --> 00:03:45,650
we return a JSX element for every user
77
00:03:45,650 --> 00:03:49,113
of that user's array we expect to get on this prop.
78
00:03:50,480 --> 00:03:51,660
So the element,
79
00:03:51,660 --> 00:03:53,670
the JSX element which I wanna render
80
00:03:53,670 --> 00:03:55,780
is simply a list item here
81
00:03:55,780 --> 00:03:58,040
and inside of the list item,
82
00:03:58,040 --> 00:04:00,690
I want to output the username.
83
00:04:00,690 --> 00:04:03,420
Let's say we expect user to be an object
84
00:04:03,420 --> 00:04:05,210
with a name property,
85
00:04:05,210 --> 00:04:07,220
then we could do it like this.
86
00:04:07,220 --> 00:04:08,710
And then thereafter,
87
00:04:08,710 --> 00:04:10,320
maybe in parentheses
88
00:04:10,320 --> 00:04:12,190
and that's just text here,
89
00:04:12,190 --> 00:04:13,890
not a special react syntax.
90
00:04:13,890 --> 00:04:16,570
So between this parentheses text,
91
00:04:16,570 --> 00:04:21,103
I want to output let's say user.age years old.
92
00:04:22,340 --> 00:04:25,470
So my expectation here is that users
93
00:04:25,470 --> 00:04:27,940
is an array of user objects
94
00:04:27,940 --> 00:04:32,173
where every object has a name property and an age property.
95
00:04:33,100 --> 00:04:35,620
Why can I expect this?
96
00:04:35,620 --> 00:04:38,150
Because we're the ones creating this app.
97
00:04:38,150 --> 00:04:41,400
It's up to us to decide how we wanna manage our data.
98
00:04:41,400 --> 00:04:44,100
And I wanna manage an array of user objects
99
00:04:44,100 --> 00:04:47,683
where every object has a name property and age property.
100
00:04:48,990 --> 00:04:53,183
So with that we have the logic in place to output our users.
101
00:04:54,040 --> 00:04:56,020
Some styling would be nice.
102
00:04:56,020 --> 00:04:57,010
And for that,
103
00:04:57,010 --> 00:05:00,030
I first of all will wrap this list in a card.
104
00:05:00,030 --> 00:05:03,200
So I want to have that card component look here as well.
105
00:05:03,200 --> 00:05:08,200
So I'll import card again from UI card
106
00:05:08,270 --> 00:05:09,870
and we need to import it here
107
00:05:09,870 --> 00:05:13,090
even though we already imported it in AddUser
108
00:05:13,090 --> 00:05:15,760
because you need to import what you wanna use
109
00:05:15,760 --> 00:05:18,480
in a certain component into every component
110
00:05:18,480 --> 00:05:20,020
where you wanna use it.
111
00:05:20,020 --> 00:05:22,810
So it's not enough to just import card once
112
00:05:22,810 --> 00:05:25,480
in another component you need to import it
113
00:05:25,480 --> 00:05:28,203
in every component where you wanna use the card.
114
00:05:29,150 --> 00:05:33,620
With that we can use card here to wrap the unordered list.
115
00:05:33,620 --> 00:05:36,120
And now I also wanna have some styling.
116
00:05:36,120 --> 00:05:41,060
And for that you find a UsersList.module.css file attached
117
00:05:41,060 --> 00:05:44,880
which you can just drag and drop into your users folder.
118
00:05:44,880 --> 00:05:49,240
And from there, you know the game we can import classes
119
00:05:49,240 --> 00:05:54,240
from UsersList.module.css to use that CSS modules feature.
120
00:05:57,210 --> 00:05:58,390
And then here on the card,
121
00:05:58,390 --> 00:06:00,410
I'll add the class name prop,
122
00:06:00,410 --> 00:06:02,940
which I can because a few lectures ago,
123
00:06:02,940 --> 00:06:04,570
we made sure that we utilize
124
00:06:04,570 --> 00:06:08,550
the incoming class name prop here instead of the card.
125
00:06:08,550 --> 00:06:09,860
So we can set it here.
126
00:06:09,860 --> 00:06:13,730
We can set the prop and I set it to classes.user
127
00:06:13,730 --> 00:06:17,550
to have not just a default card class on that card component
128
00:06:17,550 --> 00:06:19,713
but also my special user class.
129
00:06:21,170 --> 00:06:23,740
Excuse me, users not user
130
00:06:25,530 --> 00:06:28,160
With that we got a UsersList component.
131
00:06:28,160 --> 00:06:29,630
Now we need to use it.
132
00:06:29,630 --> 00:06:31,410
And that leads us to the next question.
133
00:06:31,410 --> 00:06:34,593
Where do we wanna use this brand new component?
134
00:06:35,540 --> 00:06:37,860
We could use it here in AddUser.
135
00:06:37,860 --> 00:06:41,810
We could use it here below to form UsersList like this.
136
00:06:41,810 --> 00:06:44,653
We just have to add an import and we could use it there.
137
00:06:45,570 --> 00:06:49,140
That would be fine, but I don't think it makes sense.
138
00:06:49,140 --> 00:06:52,020
It's the AddUser component.
139
00:06:52,020 --> 00:06:55,320
If some other developer would have written this component
140
00:06:55,320 --> 00:06:58,850
and you would need to use it in your application,
141
00:06:58,850 --> 00:07:02,200
would you expect that this component does not just fetch
142
00:07:02,200 --> 00:07:04,030
the data and add it
143
00:07:04,030 --> 00:07:09,030
but that it also outputs to user data by the name AddUser.
144
00:07:09,240 --> 00:07:12,220
It doesn't sound to me like it's going to output anything.
145
00:07:12,220 --> 00:07:14,300
It's just about adding something,
146
00:07:14,300 --> 00:07:16,500
about getting some data to add something,
147
00:07:16,500 --> 00:07:17,500
something like that.
148
00:07:18,610 --> 00:07:22,030
So whilst you again could technically render it here.
149
00:07:22,030 --> 00:07:24,510
I think it logically makes more sense
150
00:07:24,510 --> 00:07:26,350
to include it somewhere else.
151
00:07:26,350 --> 00:07:27,980
And in case you're now wondering
152
00:07:27,980 --> 00:07:30,220
how you should decide where to render it,
153
00:07:30,220 --> 00:07:31,550
it's your app at the end.
154
00:07:31,550 --> 00:07:33,660
You can render things where you want,
155
00:07:33,660 --> 00:07:35,970
you can structure your app in the way you want,
156
00:07:35,970 --> 00:07:38,120
and the more you work with React
157
00:07:38,120 --> 00:07:39,600
the more you will get a feeling
158
00:07:39,600 --> 00:07:42,190
for common patterns and practices.
159
00:07:42,190 --> 00:07:45,470
In this course, you will also learn a lot about that
160
00:07:45,470 --> 00:07:48,780
and of course see a lot of examples here.
161
00:07:48,780 --> 00:07:52,470
Here, I wanna render the UsersList and the app component
162
00:07:52,470 --> 00:07:55,350
because that's also where I use AddUser.
163
00:07:56,380 --> 00:08:00,540
So to me, it makes sense that we then have UsersList here
164
00:08:00,540 --> 00:08:03,880
as a component next to AddUser.
165
00:08:03,880 --> 00:08:05,550
So we build our app here.
166
00:08:05,550 --> 00:08:08,500
We first have to block for getting that user data,
167
00:08:08,500 --> 00:08:10,850
then we have to block for outputting the user
168
00:08:10,850 --> 00:08:13,110
and below that we might have other parts in the app
169
00:08:13,110 --> 00:08:15,073
like a footer or something like that.
170
00:08:16,380 --> 00:08:18,460
Now to use that UsersList component here
171
00:08:18,460 --> 00:08:20,144
we need to import UsersList
172
00:08:20,144 --> 00:08:25,144
from ./components/Users/UsersLists like this
173
00:08:25,380 --> 00:08:29,430
and now we can use it though it won't work.
174
00:08:29,430 --> 00:08:31,970
And actually, whilst we don't get an error here
175
00:08:31,970 --> 00:08:33,893
we do see an error here.
176
00:08:34,970 --> 00:08:38,273
Cannot read property map of undefined.
177
00:08:39,240 --> 00:08:43,070
Now I told you not to panic when you see an error message.
178
00:08:43,070 --> 00:08:44,933
So let's see what's the problem here.
179
00:08:45,800 --> 00:08:49,340
It points us at the UsersList component line nine
180
00:08:49,340 --> 00:08:52,350
and it shows us the code snippets that's the problem.
181
00:08:52,350 --> 00:08:56,760
Here it's in the end where we call map on the user's prop.
182
00:08:56,760 --> 00:09:01,730
This fails because map does not exist on undefined.
183
00:09:01,730 --> 00:09:03,033
What does this tell us?
184
00:09:04,510 --> 00:09:07,020
It tells us that in the UsersList component
185
00:09:07,020 --> 00:09:11,410
here users doesn't seem to be an array.
186
00:09:11,410 --> 00:09:13,430
It seems to be undefined,
187
00:09:13,430 --> 00:09:16,380
and undefined, of course, is a valued type of JavaScript
188
00:09:16,380 --> 00:09:18,520
and indeed undefined,
189
00:09:18,520 --> 00:09:21,820
this value type doesn't have a map method that is correct.
190
00:09:21,820 --> 00:09:23,943
You can't map undefined.
191
00:09:24,890 --> 00:09:27,470
Now why is users undefined?
192
00:09:27,470 --> 00:09:30,590
Because in the place where we use UsersList.
193
00:09:30,590 --> 00:09:32,080
So in the app component,
194
00:09:32,080 --> 00:09:34,433
we're not setting that users prop.
195
00:09:35,520 --> 00:09:39,320
Keep in mind I'm extracting users from props.
196
00:09:39,320 --> 00:09:44,050
So I expect to get that users data that array in the end
197
00:09:44,050 --> 00:09:48,310
on the user's prop on my UsersList component.
198
00:09:48,310 --> 00:09:52,490
So when I use this component in JSX when I use it
199
00:09:52,490 --> 00:09:54,840
as a regular HTML tag in the end
200
00:09:54,840 --> 00:09:57,610
I need to set that users prop
201
00:09:57,610 --> 00:10:00,670
or I need to include a check here where I check
202
00:10:00,670 --> 00:10:04,320
whether it's undefined and I don't even try to map it,
203
00:10:04,320 --> 00:10:06,420
that would be an alternative.
204
00:10:06,420 --> 00:10:08,550
But here I of course always wanna set it.
205
00:10:08,550 --> 00:10:11,650
So in AppJS we need to set the user's prop
206
00:10:11,650 --> 00:10:13,740
and this has to be users
207
00:10:13,740 --> 00:10:17,250
because that's the name we are retrieving here.
208
00:10:17,250 --> 00:10:19,050
If you picked a different name here,
209
00:10:19,050 --> 00:10:21,460
you need to pick a different name here too,
210
00:10:21,460 --> 00:10:22,880
but I'm working with users
211
00:10:22,880 --> 00:10:25,340
and we need to set this to an array.
212
00:10:25,340 --> 00:10:27,280
And for now an empty array, of course,
213
00:10:27,280 --> 00:10:28,740
does the trick.
214
00:10:28,740 --> 00:10:30,170
With that we don't see a list,
215
00:10:30,170 --> 00:10:31,890
but we also don't see an error
216
00:10:31,890 --> 00:10:34,180
and we at least see the card where the list
217
00:10:34,180 --> 00:10:36,550
will eventually be rendered.
218
00:10:36,550 --> 00:10:39,710
That was a huge step forward.
219
00:10:39,710 --> 00:10:43,393
Now let's make sure we actually manage a list of users.
17188
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.