Beautiful.
And once we have set up our form role as a separate component, we actually want to do the same thing
with alert.
And the moment we don't even have the alert, but basically the way it's going to look like, I mean,
we're going to have it here when we're adding the job, for example, when we're not passing any kind
of values.
Same is going to be with the profile.
Meaning in here will showcase that if we're successful and hopefully you get the gist.
So again, there's going to be a component that we reuse all throughout our application, and it kind
of makes sense that we right away set it up because in the register, we'll also use it as well.
So if the user's trying to submit the values or we're getting some kind of error back from the server
we want on display and with this one right away, we want to set it up as a separate component.
So go to components, you want to create alert jazz and there you want to return it there with the class
names of alert and alert danger.
Now there's also one for success.
And as far as the text, well, you can just place whatever you want to order now.
Eventually, these ones, the class, the type of the alert as well as the text is going to be coming
from the global context.
So that's how we will control at the moment.
We simply want to set up all the imports and exports.
So again, you remember the drill.
We're looking for index jazz.
Then we're looking for the component, the register and then we set everything up and not in there for
the time being.
You can set up Charlotte in an initial state again.
Eventually, it's going to be coming from the global state.
But for now, we'll set up the Boolean over there.
Now we're going to you can go with true or false.
It doesn't really matter.
Just remember that with True showcased the world with false Europe.
And then right after the log in and our return.
And then you want to check of the state, which is located in the values.
And more specifically, Charlotte.
So if it's true grammar displayed, if not, then we don't display the alert.
So let's get cracking and we're going to start the journey the same way.
We want to navigate, first of all, two components.
We want to create a new one.
We're going to go with alert jazz.
Let's create our component.
With the snippets and then for the time being, we're going to go with Dev.
Now these are global classes again, if you want to take a look at them.
Please do that.
And we're looking for fallen classes.
We're going to set up the alert.
And we also want to set up what type of the alert is going to be.
Again, eventually, this will be dynamic, but I'm just going to go with danger for now.
Just keep in mind that you also have here a success one.
Again, you can take a look at those classes in the global courses and then it's closed live and there's
going to be a dummy text.
For now, Alert Alert goes here.
We export everything.
It looks like there's a tiny mash up over here, so let me remove this.
Not needed there.
And then once I have this in place again, we want to set up the imports are back in the index and we're
going to look for my alert.
And then once I have imported, I also want to set up here a proper export.
So let's go here and have a common one back in the register.
When I look for my component and yes, the name will be alert when, like I said, for time being,
let just sit up here, show alert in the state.
And since I want to see the alert right from the get go, I'm going to go with.
And then we will talk with the value, then let's keep on scrolling.
And then, like I said, where we have the heading three conditionally, if the show alert a stroke,
then I want to showcase now that is sitting in evaluar.
So we go here with values show alert.
Not if that is the case, then we display the alert.
Then let's save it, and once we save, we should see the alert, and now let me go to a big screen
and let me just showcase how we can toggle that one.
So I'm going to inspect.
I'm looking for the online.
I'm here, I'm looking for to register, and here I'm going to shoot for my talk option where an outer
shoulder is true.
But then once we click, it's set back.
It's your fault.
So this is what we're going to do using our global context where there's going to be a property and
if there's some kind of error, we'll set it equal to true.
So then we will display the alert.
If not, then the alert won't be displayed.
So let me go back over here.
And you know, before I do that, let me just quickly showcase if we have different class, which again
will toggle eventually.
If we go here with success, then this is going to be green or for you.
That makes sense.
And now let me set it up back in the register equal to false, because again, eventually it's going
to be coming from the global state anyway.
So let's save us.
And once we have everything in place now, we can start setting up the toggle functionality for the
member.