Original subtitles

So let's tackle our list of users next.

Now the first important question is

where do we wanna output?

And the second question that depends on the first one

is where we then actually wanna manage our list of users?

So where do we wanna output that list?

We get the user data here in the AddUser component

and technically we could simply add more HTML code

in that component to all the render a list,

maybe here unordered list below the form.

We could then manage our list of users with use state in

here in AddUser and output it down there.

That is something we could do

and technically that would absolutely work.

But by the way, I'm saying this,

you already hear that this is probably not how we're going

to do it.

The idea in React really is that you work

with a bunch of components

that you have small isolated pieces

of HTML code and logic where every component really

has its own task,

its own responsibility you could say.

And therefore you wanna keep

your components small and focused.

You could certainly argue that a component

that fetches user input

and then outputs this as a list is focused enough

but I would argue that it's better

to have one component that fetches user input

that's this AddUser component which we already have.

And then we have another component that is responsible

for outputting the list of users

so that we split the outputting

and the fetching logic into two different components.

And therefore I'll add a brand new component,

the UsersList component, like this.

And here the UsersList component should be responsible

for well, outputting my user data.

Therefore, in there, of course,

we're going to write a React component.

So let's import React from React

so that we can use JSX code.

And then here we have UsersList.

We get our props here and we'll of course export

our component here so that we can use it in our files.

And then here I want to in the end return an unordered list

where I want to go through a list of users

which I well, need to get in some way

and output a couple of list items for every user.

So one list item for every user.

How does this work?

Well, it think it makes sense to assume

that in the UsersList component,

we rely on props to get our actual array of users as data.

So here between the unordered list

we could actually use props.

Let's say users,

it's your component.

So it's up to you which prop name you expect here.

I expect to have a prop property which is named users

and that should hold an array of user data.

So we can use the map method

which you learned about in the lists and conditionals module

to map that array of users,

queue and array of JSX elements.

So to transform our user data to JSX elements

which then are rendered onto the DOM.

So map executes a function on every item

in the user's array

and we'll get that item as input.

Since it's an array of users

I'll name that single item user

and write a anonymous arrow function here.

And then in this anonymous arrow function

we return a JSX element for every user

of that user's array we expect to get on this prop.

So the element,

the JSX element which I wanna render

is simply a list item here

and inside of the list item,

I want to output the username.

Let's say we expect user to be an object

with a name property,

then we could do it like this.

And then thereafter,

maybe in parentheses

and that's just text here,

not a special react syntax.

So between this parentheses text,

I want to output let's say user.age years old.

So my expectation here is that users

is an array of user objects

where every object has a name property and an age property.

Why can I expect this?

Because we're the ones creating this app.

It's up to us to decide how we wanna manage our data.

And I wanna manage an array of user objects

where every object has a name property and age property.

So with that we have the logic in place to output our users.

Some styling would be nice.

And for that,

I first of all will wrap this list in a card.

So I want to have that card component look here as well.

So I'll import card again from UI card

and we need to import it here

even though we already imported it in AddUser

because you need to import what you wanna use

in a certain component into every component

where you wanna use it.

So it's not enough to just import card once

in another component you need to import it

in every component where you wanna use the card.

With that we can use card here to wrap the unordered list.

And now I also wanna have some styling.

And for that you find a UsersList.module.css file attached

which you can just drag and drop into your users folder.

And from there, you know the game we can import classes

from UsersList.module.css to use that CSS modules feature.

And then here on the card,

I'll add the class name prop,

which I can because a few lectures ago,

we made sure that we utilize

the incoming class name prop here instead of the card.

So we can set it here.

We can set the prop and I set it to classes.user

to have not just a default card class on that card component

but also my special user class.

Excuse me, users not user

With that we got a UsersList component.

Now we need to use it.

And that leads us to the next question.

Where do we wanna use this brand new component?

We could use it here in AddUser.

We could use it here below to form UsersList like this.

We just have to add an import and we could use it there.

That would be fine, but I don't think it makes sense.

It's the AddUser component.

If some other developer would have written this component

and you would need to use it in your application,

would you expect that this component does not just fetch

the data and add it

but that it also outputs to user data by the name AddUser.

It doesn't sound to me like it's going to output anything.

It's just about adding something,

about getting some data to add something,

something like that.

So whilst you again could technically render it here.

I think it logically makes more sense

to include it somewhere else.

And in case you're now wondering

how you should decide where to render it,

it's your app at the end.

You can render things where you want,

you can structure your app in the way you want,

and the more you work with React

the more you will get a feeling

for common patterns and practices.

In this course, you will also learn a lot about that

and of course see a lot of examples here.

Here, I wanna render the UsersList and the app component

because that's also where I use AddUser.

So to me, it makes sense that we then have UsersList here

as a component next to AddUser.

So we build our app here.

We first have to block for getting that user data,

then we have to block for outputting the user

and below that we might have other parts in the app

like a footer or something like that.

Now to use that UsersList component here

we need to import UsersList

from ./components/Users/UsersLists like this

and now we can use it though it won't work.

And actually, whilst we don't get an error here

we do see an error here.

Cannot read property map of undefined.

Now I told you not to panic when you see an error message.

So let's see what's the problem here.

It points us at the UsersList component line nine

and it shows us the code snippets that's the problem.

Here it's in the end where we call map on the user's prop.

This fails because map does not exist on undefined.

What does this tell us?

It tells us that in the UsersList component

here users doesn't seem to be an array.

It seems to be undefined,

and undefined, of course, is a valued type of JavaScript

and indeed undefined,

this value type doesn't have a map method that is correct.

You can't map undefined.

Now why is users undefined?

Because in the place where we use UsersList.

So in the app component,

we're not setting that users prop.

Keep in mind I'm extracting users from props.

So I expect to get that users data that array in the end

on the user's prop on my UsersList component.

So when I use this component in JSX when I use it

as a regular HTML tag in the end

I need to set that users prop

or I need to include a check here where I check

whether it's undefined and I don't even try to map it,

that would be an alternative.

But here I of course always wanna set it.

So in AppJS we need to set the user's prop

and this has to be users

because that's the name we are retrieving here.

If you picked a different name here,

you need to pick a different name here too,

but I'm working with users

and we need to set this to an array.

And for now an empty array, of course,

does the trick.

With that we don't see a list,

but we also don't see an error

and we at least see the card where the list

will eventually be rendered.

That was a huge step forward.

Now let's make sure we actually manage a list of users.