Original subtitles

Let's implement that resetting

and validation logic together.

And let's start with resetting.

Resetting generally is easy.

Here in add user handler,

I just wanna call set entered username

and set this again to an empty string,

and do to the same also for set entered age.

Now, with that, I reset my states to an empty string

once I locked these states snapshot here.

Now, what you'll see, however,

is that if I save this and I enter max and whoops,

max and 31,

we get the output here

but the inputs are actually not cleared.

So setting our state snapshots to empty strings

doesn't seem to work here, right?

Well, it actually does work.

But one problem we have

is that we don't reflect our current state in the input.

That's not a problem as long as we don't wanna change it

from anywhere else than user keystrokes.

But here I want to change it when the form is submitted.

So I wanna feed the current state for entered username

and entered age back into those inputs.

And we can easily do that.

These input elements have value props.

And we can set them to values,

which will then be reflected in the inputs.

And I can set my value of that first input

to entered username,

and the value of the second input here to entered age.

And now I'll reformat that.

And with that, we'll have inputs

which actually reflect the current state snapshot,

even if it's not changed for a keystroke,

but like here, up on a form submission.

So if we now save that and try again.

You'll see that now it's cleared.

So that's step one.

Now for the validation.

For the validation here in ad user handler,

I wanna make sure that all this code here

only executes if we have valid inputs.

So if neither the name nor or the age is empty,

and the age is also not smaller than one.

For that we can enter if check here.

And check if entered username trimmed is actually empty

which we can check by checking its length.

Trim will remove any excess white space.

And if it then has a length of zero,

we know there is no character in that string,

it's an empty string.

And if that's the case or if entered age is empty,

so if we have to same check here, then I want to return.

For now I'll not do anything else.

If I return here, oops, here,

then this code is not going to execute

because return statements finished the function execution.

Now I also want to check for my age input value.

Not just if it's empty, but also if it's not empty,

if it's maybe smaller than one.

So I'll have a number condition here.

A number if check.

Where I check if entered age is smaller than one.

And if that's the case, I always want a return.

Now here's one important thing to keep in mind,

entered age is actually a string, not a number.

We initialize it to a string here.

And anything that's entered into input

is always retrieved as a string.

That's just how JavaScript and the dominance on works.

So we have a string here, entered ages,

a string not a number.

Now I'm comparing it to a number here.

And generally that should work in JavaScript

but to be super safe we can force a conversion

of entered age to a number by adding a plus here.

And with that we ensure that well, it is a number.

With that if I now save this,

you will see that if I click add user

we now got no log here on the right.

If I enter max 31, on the other hand, we do get a log.

If I enter max and the age is empty, I get no log.

And if I enter a negative age, let's say I also get no log.

So our validation, our basic validation here seems to work.

Now we'll take care about the error modal later for now.

Let's make sure that

for the cases where we do get valid inputs

we actually take those inputs

and we store the different users in a list

which we then render below the input field.

Now, again, you can try this on your own.

Otherwise we'll build this together over the next lectures.