Original subtitles

So, we want such an error modal.

Now a modal is simply does overlay box.

And for me that's a UI element,

we could be using in different parts

of the app.

This of course is a trivial app

that has only one part,

but we're always thinking

from the perspective

of potentially bigger apps.

Therefore I'll add it into UI folder

because such an error modal,

it could be a reusable UI element.

So I'll add my ErrorModal.js file in there.

And in that file,

we of course import react from react.

We got our error modal here,

which got some props,

and we export this like that.

Now that's the first step.

Now the second step,

is of course to fill

that with some life.

And generally, it's totally up to you,

how you wanna structure your modal.

I actually want

to reuse that card,

so import card from,

card like this,

and use this as a wrapper

for the entire modal,

because I liked

that rounded corners,

look hands on,

I wanna use that therefore.

Now inside of that card,

my modal should have different sections.

I wanna have a header,

with the H two tag,

where we actually can output some title.

Now below that,

I wanna have a div,

which holds my main content.

And in there a paragraph

with DRR message,

I wanna display eventually.

And below that, a footer.

Now in that footer,

I wanna have a button which we can click

to close the modal.

So for that I'll import button

from that slash button

to all the reuse, this component.

And this, shows us this re-usability of components.

We're using the card,

in various places of the app.

We're using the button

in different places of the app.

And we only defined these components

and their styles once.

And we can build our entire UI

with these reusable building blocks.

That's really the heart

and the core idea

or one of the core ideas of react.

So, we got the button here,

and hence the footer.

We can add such a button

and say, okay,

or something like that on it.

So that this is our closed modal button in the end.

Now, between the H two tags here,

I wanna have some title.

And of course

that modal should be configurable from outside.

I don't wanna hard code, the title

and the message into this component.

It should also be reusable.

So that we can use it

in different places of the app,

to show different error messages.

Hence here, I, I'll put something dynamic,

between curly braces

and use, let's say props.title.

Again, it's your component.

You can use any prop name you want here,

but I expect to get a title prop,

which holds the text,

which should be output here.

Now between the paragraphs,

I want to output props.message.

So that we also expect a message prop which,

well, holds the message

that shouldn't be output here.

And I also want some styling.

For data attached

to find the errormodal.module.CSS file.

And you can, again,

just drag that into your UI folder next

to the error modal JS file,

and then import it here.

Import classes from ./ErrorModal.module.CSS.

Because I'm also using CSS modules here,

to have unique class names.

And there are a couple

of classes that should be attached.

For example here,

on the card itself,

I wanna add the classes.modal class.

Which is one of the classes

to find here in the CSS file.

In addition on the header,

I want to have the classes.header class.

And on that div

that's surrounds the paragraph,

I will add the classes.content class.

On the footer,

we'll also add a class,

and that's the classes.actions class.

And these are all CSS classes predefined

in that CSS file.

With that, we'll have a basic modal,

and we can already see

that in action.

The question is,

where do we wanna render it,

as part of which component?

And you can actually argue about that.

You can argue

that it should be rendered

inside of add user,

because ultimately it will be this component

that will trigger the modal.

You could also argue,

that it's a general overlay

over the entire UI

and therefore logically,

it should be rendered as high

as possible in the component tree.

Something like inside

of the app component

or anything like that.

Now, I will go for the place

where it actually is, being cost,

and that would be add user component,

but you can definitely also pick a different place.

You then of course, we'll need

to update your state management appropriately.

I will write state management code,

that ensures that it works here

inside of the add user component.

So here I wanna output my error modal,

and therefore, we have

to import it, of course.

So we go here,

and import error modal

from UI error modal.

Now we also need to configure it.

We need to set a title,

and we'll soon set this dynamically

but now I'll set it to,

an error occurred,

and the message which we can set

to, something went wrong.

But this will not work.

And do you know why?

I briefly touched on it

in the debugging section.

Well, if we try to save this,

we'll get an error.

We'll get the error

that we got adjacent JSX elements,

and that this is not allowed basically.

Indeed react doesn't allow,

two side by side components being rendered,

directly as a root element

of your return statement.

And you therefore need to wrap this,

for example, in an extra div.

We'll later see a different solution for this,

for now we'll just take extra div,

and put our error modal

and our card, into that div.

So that the div has returned

by the return statement.

And then inside of the div,

we can have adjacent elements.

And with that it compiles,

and if you reload,

hey, this doesn't look too bad.

We got our modal here.

Now, of course it's not dynamic.

Of course we can close it right now.

And of course, one crucial thing is missing,

and that's a backdrop for the modal.

So a overlay between this modal overlay

and the actual main page.

So to be calm,

to interact with the rest

of the main page,

which currently, is possible.

So, to make sure we can't interact

with the rest of the page,

back in the error modal,

I'll add an extra div,

next to the card, not inside of it,

but next to it, and therefore,

as we just learned,

we need a general div,

that wraps both,

that extra div

and the card.

And on that extra div,

I'll add a class

and that's the classes.backdrop class.

The device itself is empty

but this backdrop CSS class makes sure,

that we have this grayish,

black transparentish background behind the modal.

If we now save everything,

you can see the background here,

and now I can't interact

with the form anymore, for example.

So with that,

we've got the model in place.

Now, of course, the goal is

to show it only sometimes,

only if we do try

to submit invalid data.

And of course we wanna make sure

that we can also dismiss it.