All right, and back to work, so let's now get back to our people are looking for a grocery button.
Let me check where I'm at.
So let me stop the server.
Liberty Council, City Road.
OK, once I'm here again, I would want to go to grocery and more specifically, set up like show online,
of course, same deal, npm install and ampm start Wattstax up to their server online.
As far as a project in a source, you find of course the address of the alert address, which is going
to be on alert component and list where we are going to iterate over the data and display the items.
Now also on this project, we're going to use the reactor concern, as you can see in the list, just
I-Report, both of them, the added one, as well as the trash one.
And I guess and first start by navigating to jazz.
And as always, we're just going to set up some state borders.
First one is going to be for the form.
So we go with name and surname.
So this is the value that we'll use in our form.
And by default, we're just going to have the empty row.
Then there's going to be one for the list where eventually we will use the local storage, but not for
now.
So for now is just going to be an empty array.
So we go with your state and then we pass in the empty.
Right.
Then we're going to have one for is Eraring.
So there's going to be a flag in state, whether we're editing or not.
So in this case, let's go.
What is editing and then set is editing, of course.
And by default.
Yes.
You guessed that it is going to be false.
Yep.
That's the case.
All right.
Once we have is that there's two more state wires that I would want I would want one for edit ID.
So this is going to be very specific where we have added Eddie.
And then the other edit idea, of course, will reflect, well, which item are we actually editing?
So we go with edit and then and then set at it.
And then idee is equal to a year's state and by default it is going to be on the last state value will
be alert const alert and you can probably already guess that we're going to have some kind of function.
So set alert as well.
Now the difference here is going to be an object.
So unlike previously where we just had boolean values, true or false, in this case, I would want
to pass in the object because in this project I want to pass in more values as well, where as I add
the item, I would want to display some text and I would want to display a different color for alert.
But for example, once I deleted, then I have again different values for the colors as well as I have
different value for the text.
So that's why instead of just true or false, which we will still use, there's going to be still a
boolean.
And I'm going to be sitting in this as an object and then there's going to be more properties with values.
So first one will be show.
So this is going to be that boolean, which, by the way, by default will be false.
Then the message, what we're going to display inside and then also the type.
And for a type, there's going to be either success or danger.
Now, I borrowed those class names from the bootstrap.
There's nothing specific about them.
Danger is the red one and the success one is the green one.
So of course, we have the item.
Then it's success.
If we delete it, then we display that we have a danger.
We deleted the item.
OK, good.
And now as far as our return, it's not going to be heading to is going to be a section let's add a
class name here and let's say S. Santur, beautiful.
On the inside of this section, I would want to go with a form.
And then also there's going to be a list.
Now, the Gocha for the list is going to be that I only will want to display that list if there are
some items in the list.
So I don't know, maybe in the beginning, let's not set up that flag.
Let's always display that.
Let's just remember that if you'll check out the app, you'll see that by default, if there are no
items, then the list, of course, is not displayed.
But for the time being, since we don't have any items, we might as well added side by side where we
have the form and then we have the list.
So maybe let's do it this way first.
And my dear, it's going to have a class name.
And grocery container, like I said, eventually there's going to be conditional rendering, but not
right now and in here I would want to go with list component.
Of course, I'm already importing and it's just going to say list component.
So we should have something like this online right next to the list.
But still within this div, I would want to go with a button and then here we're going to go with class
name and we're going to have a clear beat in class and on Kallick.
We're going to clear the list.
Now we don't have the function yet, so let's just put this on on nice and we're going to have clear
items of value.
OK, awesome.
That should be our button on that right above our grocery container.
Now, I'm going to set up my form now.
I just set up my own submits and forms.
But just please keep in mind that if you want, you can do on click on a button.
So there's going to be a submit button.
And yes, you can definitely set up on click.
Just remember that if I'm sitting on submit on the form, then on a button.
If you don't like this approach, you would need to go with on click.
So let's start with class name.
And in here, we're going to go with grocery, former grocery form, and also, like I said, there's
going to be on submit mine as well right away.
Had it met now, there's not going to be much functionality.
There are just blogs and all that stuff.
So it's got const handle sub Amet and I'm looking for event object.
Of course I would want to prevent a default event and default and then let's just cancel log.
Hello.
OK.
Not much originality over there but I think that Qadoura and then what else I would want, I would want
to display my art show right within the form but above everything else that we're going to be setting
up.
I would want to set up Mylord now.
Alert will depend on that value.
So what I'm going to do is alert and then show some checking for the property of show more specific
for the value of that property.
And if that is the case, I would want to display it.
Now, there's going to be more things that we're going to add in alert.
But for the time being, let's just add this conditional and that where we have the alert by default,
let's set it up to true just so we can see that our functionality works.
And there is now, of course, we have alert component, which is beautiful.
Now I can delete it.
We can go back to the default.
And again, we cannot see the alert.
So right after the alert, we're going to go with my three and I'm going to call this grocery.
But eventually that is going to be the title and we're going to go with Dave with a class of form control.
Now, this one is just for styling, so there's nothing as far as react.
I just added the class from control and then we have the input and of course, we'll also have the button.
So since the input has more attributes for let's just add a button and line for the button.
We're looking for type, which is going to be subnet, of course.
And also I'd want to add a class name.
So here we go.
We have a class name of subnet and line hyphen beeton inside of the button, though I don't want to
add, just submit because when I'm going to be editing, I will also have different values and that
is going to be added.
So in here I'm going to go is editing.
So I'll check.
And if that is the case, if everything is true, then of course I'll display at it.
If not, then I'll say submit.
Now what is the value by default?
Course it is false.
Correct.
That's why I see the submit.
So if I change this, which of course eventually will do dynamically, then of course I'll have my at
it.
So let me set it up back to force and we are in good shape.
So then we have this text.
And I would want to add a little bit of styling here, so I'm going to go with girl, that is my class,
of course, then I'll add some placeholder just so the user knows what he or she needs to type.
So we're going to go with an example and then we're going to type X and now let's set up our controlled
input so we have our value attribute, which is equal to what amount is equal to my name.
Of course, that is my state now and then on change, so on change, which of course is equal to my
inline function.
I grab my event object and then I go with a set name and then I pass in event Target and then I have
the value so I can save navigate to a bigger browser window.
I can open up three thousand.
There it is.
There is my app.
I can of course check the components and see that I have my less beautiful I have all my state value.
So as I start typing now, this is going to be my set value.
And then if everything is correct, I should see in the console, which of course I do.
So now we know that our structure is correct and now we can proceed to more interesting things.