We go any further and start adding the delete and added functionality.
I also want to set up my alerts.
So if we navigate back to address, I would want you to first change the state values for the alert,
because this is something that we're going to pass down to our alert component.
So by default, let's just set it up as true, because I would want to showcase and the message is going
to be, I don't know, hello, world doesn't really matter what you type over here because it is going
to be set back to an empty strength.
And then, like I said, we have two options.
We have success and danger.
So let's start with success.
And then, of course, by the end of this video, we will change it to dangerous world the moment we
don't see anything apart from the alert component.
And what I would want is inside of this alert component, I would want to pass in all the properties
from my state of alert value.
And how we can do that is by the not so object threat operator.
And then we go with alert.
So now, of course, in the alert, I would want to grab them.
So we're going to navigate to alert component and we're going to grab those properties then.
Those are just coming from the alert state value and those are type on message because we really don't
need the show showreel handle in the address.
We don't really need it over here.
And then as far as the heading to I'm going to go with paragraph and then I'll place my text.
So I'll say message, whatever it is.
And as far as the classes, well, this is where the type comes into play, where again I would want
to set up my template strength and by default all of them will have the alert class, but then depending
on the type of one more class and that class will be alert and then whatever is the type, again, the
options are danger or success.
So if you check it out now, I can see that this is, of course, the success class.
So we have the alert and then in this case it is alert and then high from success.
You want to check out those glasses, just navigate in The Exorcist.
But like I said.
If I change this danger, you'll see that our styling is going to be a bit different if we go danger
where it is now, of course we have a different style.
But then whatever is, the message gets passed.
And Tueller, hopefully that is clear.
Hopefully understand that we only showcase because truth is equal to our show.
So our show values on online, whatever, passing as message and whatever type we pass in.
This is how the alert is going to look like and what kind of text alert is going to happen.
So now, of course, what I would want is to go back to default and just say I'm just trying as well
as type.
It is just going to be empty string.
And now let's try displaying the alert once we click on the submit without adding any kind of values
and hear what I could do is I have my condition, of course.
So now I can just run my set alert.
So technically I could do something like this set alert then I know that I need to pass in the object.
Correct, because that is my default one and also show and control that.
As far as the message, let's just say please enter values a message, please, please enter and fair
value.
And the last one, of course, is the type shown here.
I'm going to go with danger since I would want my styles to be red.
So now if I try to submit their ears are alert.
However, there are two options.
First of all, I would want to remove that alert after three seconds so it's not sitting there all the
time.
And the second thing, since we're calling this multiple times, I mean, I already know that we'll
have to call this multiple times.
There has to be a better approach where why don't we set up a function that is just looking for these
three values and also maybe we can set up some default ones.
And in the process, we're just going to speed up this alert functionality.
So in this case, what I could do is come up with a function name and I'll call this show alert and
it's going to be looking for three things.
It's going to be looking for the show, for the type and the message.
So essentially, everything that we're passing in, we're just going to set up some nice default as
well.
So in here, I'm going to go with show and I'll set it equal to a false by default.
So again, this is ESX, where I say, yeah, I'm looking for this particular parameter, but by default
it's going to be false.
So if I don't pass it and then type by default will be empty.
And then also I'm going to go with message and that one also will be empty.
And then in this show alert, I'm just going to go set alert and then I'll say that I'm passing in the
object.
And then again, we can use that S6 feature where if the property name matches to the variable name,
that holds the value.
Then I can just say show and type of message, please keep in mind pretty much the same thing as I would
have written like this where I have the show.
So that is my primer.
And I just set it equal in my object in there.
Six, I can speed it up and this is not my value.
Now, of course, in here I muster up a little bit with syntax since I was going for the error function.
And now instead of using set alert, I can just use my Scholer.
Correct.
So I go with Scholer and then I need to decide, well, what kind of values I would want to pass it
in.
And I would want to say that first one is going to be true.
So I would want to display my alert, of course, because I'm looking for the show first, then the
next one is the class.
So what is going to be the styling?
And in my case, I'm going to say here danger since again is going to be red.
And lastly, well, what is going to be the text?
So we go please and try again.
If you just call it in one place, probably not a big deal to keep the alert.
But in my case, since we had multiple instances, I just thought that it's a bit faster if we come
up with a function.
And of course, once I click Verity's, I have my heart.
Now let's also deal with hiding this alert in three seconds.
And we have done that already quite a few times.
But let me just repeat that we all need to pass in our show alert to alert function, that's probably
going to be a start.
And then also I would want to set up some kind of usufruct in the alert.
So once the component renders, then I would want to call my usufruct.
And then, of course, in the use of fact, I will call that show alert.
Or in this case, I'm just going to say that show is false, by the way, is by default.
If this doesn't make sense, just keep on typing with me.
We're going to go with alert.
I'm going to come up with some kind of name for the prop.
And I'm going to say remove alert is equal to my function.
So I pass in show alert like so I'm in alert, which I would need to structure it.
We say remove alert, remove all.
So that is my function.
And then once I have access to it, then I would want to set up my use of fact.
So here, when I say use effect and I'll set up my callback function.
Now, when do I want this to happen?
When the component renders right.
So I'm just going to go here with this empty dependency list and then here again, let's do the cleanup.
Just because we're responsible and we're going to go with time out is equal to a set time and then we
pass in our callback function.
And then I'll say that in three seconds I would want to run Michael back function and the inside of
the callback function.
What do we need to do?
Just remove alert?
Why?
Because we already have this default notice.
One I invoke Qalat.
If show is not passed, it's going to be equal to a false and the rest of them to empty strings.
Now, I don't care about these ones, but I definitely care about the show.
So then after three seconds, of course I will invoke it and then I'll hide my work.
And then like I said, because we're responsible, we're going to go with return and we'll set up,
of course, our cleanup function and we'll set clear time out.
And then we have access to our time multivariable something that we have already done before.
So now if I try to submit with empty value, I'm going to get police and the value.
And then you guessed that in three seconds we're just going to remove it from the list.
Hopefully everything is clear now.
Of course, we can start adding more functionality to our list items since we have our alert ready to
go.