And once we have our structure in place now, of course, we can start setting up some functionality
and first thing that I would want to do is the ability to add items to our list.
Of course, we're going to do that in the most part, but we also need to understand that there's going
to be some other cases as well.
So first, I would also want to check if the value is empty.
That is definitely something that I would want to do where if the users tried to submit the form with
antivirus, then we have some kind of alert eventually.
And then also if we are editing, so where we have the control log, I will remove it.
And I'll start by saying that if a name is false, meaning if it is false, because we know that empty
string of course, is a positive value, then I would want to display it here.
Now, I don't want to work on the alert right now.
That's why the comment, the spoiler alert.
And then, like I said, I also would want to work on at it now to edit.
It is going to be a little bit different where we're going to go, what else if and then I need to check
that name is true.
So essentially, if there are some values, then I would want it.
And also if is editing is true.
So we're going to go here with is editing.
So if that is the case, then we'll deal, we deal with edit like so and then the last one is going
to be the default one where we just add the item.
Again, here's what we're doing over here.
I'm checking if the value is empty, if the value is empty, then I display the alert and in here I
check if there's something in the value and not only if there's something in a value, but if the editing
is true.
So if both of these conditions are met, then we're dealing with it in here.
I'm just saying, you know what?
If it is empty, then I will display the alert.
And then lastly, I can also deal with else.
So this is where I would want to add that item to the list.
And again, I'll add some comments, because, of course, there's going to be more functionality.
And I would want to start by show alert again, something that we're going to do a little bit later.
And then, of course, I would want to create that new item.
So in this case, I know that name has already some kind of value, because if it wouldn't, I would
never get over here and then I would want to create that new item.
So I'm going to go to new item is equal to the object.
And then I remember we have a list.
So, again, I would need to have those unique ID values correct.
So, again, we're going to cheat a little bit where it's going to be ID new date, then we invoke it.
Then we have to get time.
We can invoke it and then we go to string just because I don't want to deploy some external library,
OK, we're just going to cheat.
But and we're going to go with title.
So that is going to be the only property that I have on the subject, of course, apart from the array.
And that will be equal to the name value that is coming from the state.
And not once I have this new value, what I could do is go with a set list.
So of course that is the function that controls my array and I can just say dot, dot, dot.
So get me the previous values from the state list, value and line in here just at anyone one.
So new items are here and I would want to finish it off by saying certain I'm equal to an empty string.
So if we scroll down a bit now, I could iterate over the list.
Correct.
And you know what?
Sorry, I'm actually going to be passing the items over here.
So let's do it this way.
I'm going to say items prop is equal to the list state value.
Now, there's going to be a few more props, but by design, I would just want to set up in the list
some kind of a return.
So what I'm going to do is navigate through my list.
I know that I passed and my items props all the structures right away.
And no, I just passed in lineup's.
That was equal to my list and not in the list.
Jazz.
I would want to iterate over the items and I'm going to do that in a def and I'm going to add last night
of grocery and then West like so now we can remove the content that we had in the def and here let's
just go with items and then map.
So we're mapping over.
I'll call my object item so each and every item will be represented by the name of item.
And then I know that I have two things in that object.
I have the three and I have the title and that is equal to the item.
And once I have access to these two things, what I would want to return from my map while I'm going
to go with article here, article here, online line for the article.
That's Akie and I will be equal to my body.
And also I would want to add a class name so we have the class name and that one is equal to a grocery
item, grocery and then hyphen item.
And then inside of this article, let's start with the title.
So are a class name of title.
And here, of course, we have the property, so we just set up the curly braces and we have the title
now at the moment there's nothing there.
That's why we cannot see anything.
But I know that eventually, not only I'll have the title, but I'll also have my buttons.
So we'll have a live here with B10 contain our class.
And inside of this there, there's going to be two buttons, one for editing and then one for deleting.
So for the time being we'll just have the type.
And then of course it's going to be a button and also a class name of edit added hyphen Beaton and I'll
just place my icon on that one is F.A.A. and then of course edit I'll save and what I would want is
to copy and paste can it's still going to be button not a class name will be a bit different.
So this one is going to be called delete button and then of course the icon will be a bit different
as well.
So now if we check it out once, will the item if everything is correct, then of course we'll display
that item.
So I'm going to go here with item.
And there is now not only I can display the item, but I have my two buttons now.
They don't do anything because we don't have the functionality, but at least the item is displayed.
And I think once we have added this functionality, then we can definitely set up that conditional rendering
in the app Jass, where I only would want to showcase my list as well as my button if there are some
items in that dev.
So what we can do is we can say list and length.
So if the length is bigger than zero, only then please showcase that particular grocery container.
So I'm going to go with Yuans, meaning I'm going to go with an operator and want to sell it.
And as you can see at the moment, we don't see anything.
Or when we add the first item and of course I can see my list as well as the clear button.
Again, the biggest thing over here is right away setting up three conditions where first I'm checking
if the value is empty, then I will display a lot, which is, by the way, something we're going to
do in the next video.
Then I'm checking if there's something in a name and also if I'm editing.
And as I said, no, this is just double precaution.
Technically, you could make an argument that if this one is false, well, I wouldn't get to this condition
anyway.
But just as a double precaution, I'm just saying, if name is there and if I'm editing, then I'm going
to deal with added functionality.
And lastly, if everything is correct and I have some kind of value in a name and I'm not editing,
then I would want to create a new item with two properties idea and title and add it to my list.
So I grabbed the old values from the list.
So dot dot analyst and then I add that new item.
I'm not I'm actually I just want to go Satnam equal to an empty string because of course the moment
I add that item I would want to clear my input and then we just pass in that list as a prop into our
list component.
And I named this prop items and then of course, in the list component, I the structure them right.
And a function parameters.
I have my grocery list, I iterate over that list I the structure to properties idea entitle since those
are two things that I have in my item.
And then of course for every item I return my article inside of the article I have my title on, I have
two buttons that at the moment don't do anything, but eventually one will edit and the second one will
delete the item.