And once we can clear the whole list, now it's up the functionality where we can remove individual
items from the list.
We'll start with our function soon here in one seconds.
And I'll call this a remove item item.
It is going to be looking for the I.D., so we'll have to pass it in.
And of course, that is going to happen in the actual item.
And then once we've got the ID, then I just need to set my list of the new values and also show the
alert.
I'll start with an alert because she's going to be faster.
We're going to go with Sroufe or Show and Danger since we're removing the item and I'll say I'm removed.
OK, beautiful online.
I also want to set my list to the new value now in this case, again, just so we can keep on practicing
our right away part in my value that is coming from the filter.
I'm going to go with list filter that will always return.
And you.
All right.
And I'm just going to say, if the item I.D. matches to whatever ID passed in to remove item one, please
don't return it from this filter function server.
If item I.D. does not match, then yes, that is going to be added to my new ORAY.
If it does match that it won't get returned.
So of course then it won't be displayed.
So now of course we have our remove item.
We just need to pass it into our list of course.
So we're going to say remove item is equal to the remove item function.
So we have remove item Propp equals the remove item portion that unless we write away from the structure,
remove item function and that where we have the button.
Not the added one, but the elite can just go on click and I need to set up one function, of course,
and I'll say remove item and then I'll pass in the area.
And of course, I read the structured diary, so I just pass in the area.
So let's type some gibberish one, then two, then three.
And eventually we can remove the item click and I remove the item click and I remove the item.
Now, while we're still on the subject, you probably noticed this bug where essentially once I add
the item or once I remove after just three seconds, the alert goes away.
Now, why is that a bad thing?
Well, that's a refresh of the item that I'm going to counter to.
You want to and then I click now, empty list is only displayed for like one second or whatever.
And of course, the reason why is not happening, because if we check the alert, we can see that I
invoke my set time and every time the component renders correct so on the initial render.
So the problem is that initially, yes, we added.
So now the component is already rendered.
So when we clear items, technically, it is still in a process.
So at the end it just removes it within the three seconds are up.
So it would be nice if we would run this one every time there are some updates to the list.
So for example, I had the item and then for three seconds this one is displayed and once I remove the
item again, I still have those three seconds where the alert for a removal also is displayed.
So what we do in the app, we also pass in the list.
So I'll name this list that is equal to my list state value.
And in the alert I'm going to structure it once a list and then I'll add it to my dependency.
All right.
So every time it is going to change, I'll get a new set of time up.
So if I have this one, OK, notice now it's it's here and then once I click now it's going to sit for
three seconds.
Let's try one more time.
Can I add gibberish.
I wait a little bit and once I click, Noris will still wait for three seconds.
Not a big deal, but in my opinion it's just a better user experience.
Again, the only thing we do is just add a list to our dependency array.
So, of course, once something changes on the list, we clear out the old I'm not, I'm not.
And we set up a new one.
That's the whole logic behind it.