Original subtitles

We got a list of users,

which we feed to users list

but it's always an empty array.

And that of course is pretty static

and doesn't lead to any users being output.

Now I wanna make sure that when we click that

add user button and the add user component,

we don't just log to the user data here.

But instead we really create

a new user object with that data,

and we add that to an array of users object,

which we then output in the users list.

And how do we do that?

Well for that,

we need this concept which was called lifting the state up.

We need to manage our list of users in a place,

where we can get both access to the AddUser component

and well get notified when that AddUser button was clicked

as well as where we got access

to the users list component to feed our users array into it.

And we don't have access to UsersList

inside of AddUser, for example.

So managing our Userslist,

state here would be wrong our users array.

UsersList component sounds like the right place

because there we need that list,

but there we don't get access to the added user data

that AddUser form is out of reach here.

But actually we already configured this UsersList component

to work differently and to get the users data

from outside wire props.

Because that's the place where we wanna manage our state.

We wanna manage it in the App.js component

because that's the one component

above both AddUser and UsersList,

it's the nearest component above those two components,

which has access to both components.

And therefore we lift the state management

up to this App component.

So we wanna manage our users array here,

and we do this with the useState Hook of course,

because it's state of this App,

and when that state data changes, the App should rerender,

and that's exactly what useState

and the state managed by it does.

And therefore here, we call useState instead of App,

and we initialize this with an empty array.

Now, as you learned, useState always returns two elements,

so we can use a radius structuring,

and we got our, let's say UsersList

and a set UsersList function.

And it's now the UsersList, which I wanna forward

to the UsersList component.

With that, it's still an empty array

but we have a function that allows us to change

to the array and then that change would trigger

that App component to be rendered,

and hence the UsersList component would be updated as well

because it would all also be rendered

since it's part of the App component.

So now the missing piece is

that when we click the AddUser button

and hence the AddUserHandler in the AddUser component runs,

we foreward the enteredUsername

and the enteredAge to the App component.

And we do this with props as well.

You'll learn this as well.

We can add a prop here on AddUser

and we can name it however you want, for example, onAddUser.

And I just use this on something convention,

because in the end it will kind of work like an event.

Now we'll handle it fully ourselves,

but at the end it is like an event.

When that AddUser button is clicked,

which ultimately happens when I click on the button,

surprise, surprise, then a function which we pass to

onAddUser should be triggered.

It's a function we have yet to define

and we can define it here.

The AddUserHandler here in the App component.

And that's a function where I actually expect two arguments,

the userName and the userAge.

And you can name these parameters

however you want of course.

I expect to get that data,

and with that data, we can create a new user

and add it to our list here,

by calling setUsersList and then updating the state.

Now here, I wanna update the state,

by taking the old list and appending a new element to it,

And as you all learned earlier,

when your state update relies on the previous state,

you wanna use an alternative form of set UsersList.

You wanna use that function form,

where you pass a function to setUsersList.

And that function will automatically get the previous

latest state snapshot, when React perform state update here.

And therefore all named at prevUsersList,

the name is up to you.

And you then should return your new state snapshot

in the body of this function you pass to setUsersList.

So here I'll return an array, a new array

where I first of all,

copy all elements from prevUsersList,

and that's the spread operator which simply

pulls all elements out of that array

and adds them as new elements to this new array.

And then I add one new element at the end,

I add a new JavaScript object here,

which should have a name field,

uName is the value we stored there and the age field

which stores uAge as a value.

So the two values we get as parameters here.

And with that,

we treat a new JavaScript object for every user,

and we add that to our UsersList array.

And now we just need to wire this up, addUserHandler

is what I pass to the onAddUser prop here

on my AddUser component.

And now inside of the AddUser component,

we need to utilize this onAddUser prop.

So here in AddUser, in the AddUserHandler there,

so inside of the AddUser component now,

instead of console logging,

I will call props dot onAddUser.

And I'll execute it as a function here,

because I know that what I get as a value on that prop

will be a function.

Because we're passing a pointer at AddUserHandler

to onAddUser and AddUserHandler is a function.

So we can execute it as a function

inside of the AddUser component.

And now we just have to forward our two pieces of data,

the enteredUsername and the enteredAge

which we got stored in this AddUser component.

And with that we're forwarding that entered data

to the App component up on every click

on the AddUser button here inside of the AddUser component.

And I know that's a lot of AddUser and User

but that's what this App is about in the end.

And I want to use names.

You would realistically also use in real Apps.

So with that, this function is triggered,

and if we now save everything

we should be able to enter Max and Add User.

Now we're getting a warning here, we'll fix this in a second

but you can tell that this generally seems to work.

Now, what about this warning?

You should know what's causing this

and you should know how to fix it.

So here's a quick second for you to pause the video

and fix it on your own, and then we'll fix it together.

So do you remember what's causing this?

It's a warning thrown by React.

And in the end it tells us

that every child in a list should have a "key" prop

which has a unique value.

React needs this to efficiently update list items

and rerender them efficiently.

Now we got only one list which we render

in this whole application

and that's ends up the UsersList here, this part.

We create a bunch of list items here

and that's exactly the thing that should have a "key" prop

because it's the item you repeat.

So here we should add a "key" prop

and that in turn should hold a unique value.

So something like g1 here is not valid

because that's hard coded and to same

for every list item that's being created.

Instead, I think it makes sense

that in the place where we create a user

we don't just create a user with name and age

but we also give it an ID.

We give it an ID and that could be Math.random.toString

some pseudo unique ID.

Now, every user has an ID that is roughly unique

and inside of our list, we can now utilize the

this ID field so that the key is set dynamically to user.id.

And that ID is now unique for every user.

So if we now save this, and we retry this,

we no longer get any warnings here

because now this works as it should.

And with that, we're almost done.

The missing piece is that Modal.

Now, it's something we haven't built before

but even though it might seem totally different

because it's an overlay on the entire page.

It's actually not too far away from what we built thus far.

So definitely give it a try

on your own first and thereafter

we will learn how we can build such a modal together.