All language subtitles for 007 Adding a Users List Component_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.