Original subtitles

So let's make sure we only show the error modal

if we entered something invalid.

So in the AddUser component, currently,

if we have an empty input or an invalid age,

we just return.

We cancel this function execution.

I wanna continue doing that,

but in addition I also wanna show an error message

in the future.

And therefore, we need a way

of dynamically showing and hiding this error modal.

Put in other words, we need to update our UI

conditionally, based on the question,

if we have an error or not.

And what does this scream for?

State management.

We need to manage some error state

and that could be a string like the error message

that could be an object which bundles error

or title message, whatever you want,

but we need to manage such an error state

so that we can set it to, we have an error,

in which case we wanna render the modal

and so that we can set it to, we got no error,

in which case we render nothing.

I mean, we still rendered a form

but we wouldn't render the modal in that case.

So we need an extra piece of state here, useState

and the initial value is actually undefined,

so I don't need to pass any other initial value here

between the parentheses.

Now I'll name that error and setError

because in the end I'm going to manage

some error information here.

And now again, it's your app, it's up to you

how an error should look like for you.

If it's just a string or if it's an object,

I will manage an error as an object here.

So here in that first validation part, I will call set error

and set this to an object where I wanna have a title

like invalid input and a message

where I say, please enter a valid name and age

non-empty values, something like this.

And this will set the error state.

Now I'll do the exact same here

in the second validation function.

I'll change the title to invalid age

because here we know that the age is the missing piece

and that the age is invalid

and I'll have a different message as well.

I'll have a message that says,

please enter a valid age greater zero,

so that's my error message here.

So we set our error state in both cases,

but we set it to a slightly different object

in both scenarios.

The object always has the same properties

and that is important so that we can reliably use it

but the properties hold different values.

Now with that, that error state snapshot

will hold that error, whenever we call setError,

because then the entire component will rerender

and error will hold the latest error object

as a state snapshot.

Hence, we can use that down there in our JSX code

to conditionally render the error modal.

We just need to check if error is a thing,

and if it is, with that AND operator, we output error model.

Otherwise, if error would be undefined,

well nothing would be rendered here for this line.

And that is how we can conditionally render a JSX element.

We need wrapping curly braces around this

because this generally is a JavaScript expression,

just one, which then also holds a JSX element again.

So now the error modal will only be output

if we have an error.

And now since the error also is a more complex object

with a title and a message,

we can utilize that title and message

to output it as the actual title and message in our modal.

So here I'll bind title to error.title and message,

of course, unsurprisingly to error.message.

And with that if we save this, we get nothing here

but if I submit an empty form,

you see here is my modal.

Right now, we have no way of dismissing it,

the button doesn't work yet, but we can of course

reload the page for now so that I also show you

the invalid age case.

If I entered this, you see I get the invalid age error.

So that is working.

That works exactly in the way it should.

Now let's make sure we can also dismiss it

by either clicking on the backdrop

or by clicking on the Okay button.

Now for that, what we need to do of course,

is we need to clear our error state, this error state,

because if we have an error,

if what's stored in this state snapshot is truthy,

which a JavaScript object is,

we'll render the error modal.

So the only way of getting rid of that modal,

is to reset error to undefined or to null

or to any other falsy value

so that this condition is no longer met.

Now to achieve this, I'll add a new function here,

my error handler,

which gets no argument,

where I simply call setError and setError to null,

to set it from an object to null.

Null is treated as a falsy value,

so now this would no longer be rendered.

Now the only question

is how do we trigger this errorHandler function?

Well, I would say, from inside the ErrorModal

because inside of the ErrorModal,

we got this button and we got the backdrop

and on both we wanna register clicks

and, well, trigger that error handling function.

So on the div here, which renders the backdrop,

I'll add a onClick prop which is available

on every default HTML component React offers

and trigger the props onConfirm function let's say.

Again, it's your component,

you can name this prop whatever you want.

You can name it onHandleError

or as I do it, onConfirm, whatever you want.

The same for this button, I'll add onClick here,

and we can add onClick here

because our custom button component

which we're using, forwards whatever we pass to onClick

to the native onClick prop hence we can add it here.

And here I also wanna trigger props onConfirm.

And when I say trigger, I of course mean that,

on the onConfirm prop, we also expect

to get a function which we in the end

just forward to the onClick prop

and somewhere down in that component tree,

somewhere this will then be bound to the actual DOM element

and a click will trigger the function received

on the onConfirm prop.

So, where do we get that function?

Well in the place where we use error modal.

In the AddUser component, we use error modal,

so here we now need to add this new onConfirm prop

which I just worked with inside of the error modal.

And then here, I want to pass in a pointer

at the error handler function we defined

so that this is the function which is ultimately triggered

when we click on the backdrop

or when we click on the button.

And with all of that, if we save this, we'd go back,

I can now click here, get my modal,

click somewhere on the backdrop and it disappears.

Click on the Okay button, it disappears.

Let's try a valid input that works.

Let's try an invalid input,

we get the modal, we can dismiss it

and of course fix our mistake and that all works.

And that's the finished first app.

Now the app itself is nice, but of course not overly complex

as I already mentioned.

But we used all those core features and building blocks

that are important for React.

Components, props, state with the use State Hook,

lifting state up and all of these things.

We used styling.

We passed functions between the different components.

So all these core patterns and concepts

which you basically need for every React application

you're going to build, we have them all in here.

And that's why this hopefully, was a great practice

and why we're now well-prepared to continue.