Original subtitles

Lets continue with this app.

And let's make sure we actually fetch user input,

so that we can then, in the next step,

also render it as part of a list of users.

We got our AddUser Component here,

with the addUserHandler, which is triggered

when the form is submitted.

And now the goal is to collect the two entered values,

the username and the age.

And utilize them here.

Now to collect the values, we can use a technique

we already learned about in the last modules.

We can use State Management in React,

to update the state with every keystroke

and hence save what the user enters,

in such a state variable.

Which is then managed by React.

For that, we need to import the useState hook here,

inside of the AddUser Component.

And then we need to initialize it.

For that, we call useState and we can define

the default, the initial starting state.

And since I want to manage one piece of state

for every input, the starting state

will basically be, no input.

So an empty string.

And then I have my enteredUsername here.

And my state updating function, setEnteredUsername.

Now, in case you're not sure what this syntax means,

make sure you go through the respective lectures

in the basics module.

This is a JavaScript syntax,

which is called array de-structuring

and we use it, because useState always

returns an array with exactly two elements.

And with this syntax, we're pulling these elements

out of that returned array.

And we store them in separate constants,

of the name enteredUsername and setEnteredUsername.

And I chose those names for those constants,

because the first element of that returned array,

is the current state snapshot.

And every time this Component re-renders,

which it, for example, does when the state is updated,

this concept will hold the latest state snapshot

and setEnteredUsername on the other hand,

holds a function which we can call,

to change that state and to then trigger

such a re-render cycle.

So now, we need a function which is triggered

on every keystroke of that input here.

And for that, I'll have my

usernameChangeHandler function for example,

where I get the event object,

because we'll listen to a default DOM event

and such events will dispatch objects

with more information and we can bind

this to input here, for the onChange prop.

Which then will tie this to the change event listener.

So here I pass my usernameChangeHandler

and therefore, this function will be triggered

for every keystroke in the input element, down there.

And now, here I will call setEnteredUsername

and I wanna set it to what the user currently entered.

And we can get that entered value,

with the help of that event object.

Because there we can access the target of the event,

which is the input.

And then the value property of that input,

to get the currently entered value.

Now I'll just copy that and repeat that,

to also have a ageChangeHandler,

where I call setEnteredAge,

because that's the second piece of state

and I wanna manage, hence I'll duplicate this as well.

And here I have my enteredAge and setEnteredAge.

And with that, we're updating the enteredAge

on every keystroke.

We of course, also need to make

the connection down there.

So ageChangeHandler.

And now we got both username and the age stored.

Now, in addUserHandler, we can therefore now

console.log, enteredUsername and enteredAge,

whoops and enteredAge.

Like this.

And if we now save everything,

we can go back, open up the Developer Tools here

and go to the JavaScript console and maybe enter

Max here and 31.

And if I click Add User, you see that output here.

Now at the moment, we can also submit an empty form,

like an empty age field, but that's something

we'll fix later.

Generally fetching that data works.

Now as a next step, let's make sure

that when we click Add User,

we actually reset these inputs,

so that both input fields are empty again.

And let's make sure we also have

some basic validation, which simply makes sure

that nothing happens, that we don't

print this information here.

If one of the two input fields is empty,

or if the age is smaller than one,

or if it's equal to zero, or smaller than zero.

So that's something you can try on your own next.

We'll do it together in the next lecture, of course.