So in this little dummy application I also want to ensure that we can delete to dos and to implement
that let's make sure that in the To Do list in our list item we don't just have to to do text but that
we maybe have that inside of a span.
And then besides that in the same list item we have a button as well a button where we say delete.
Just like that.
And when that button is pressed I well want to delete this to do so on click here.
I want to do something that gets rid of that to do now since we managed to to dos here in the app component.
We need a new function here to do delete handler which is triggered and which then clears this to do
from that list.
So here as our argument I expect to get you to do I.D. which is a string because in order to do model
an I.D. is a string and then in there we again call set to dos.
But now to remove it to do for it is all again use this function for him because we have a state update
which depends on the previous state.
And in there I will return a new array and that will basically be my old array but filtered filter is
a built in method in JavaScript which returns a new array of data and this new Array will basically
be the old array minus anything you filter out filter takes a function which is executed on every item
in the old array.
And when that function you pass and returns true the item is kept and added to the new array if it returns
false it will be dropped.
So it will run on all the to do as we already have.
And now we need to have some logic that returns false if you do I.D. we were looking at is equal to
the ID to do I.D. we're getting here so that if the two dos are equal there get it's getting dropped.
So we need faults here not true and hence let's inverse as an addict and add an exclamation mark with
that we keep all to DOS but the to do where the idea is equal to the idea we're getting here because
that is the idea we want to drop because it is easy to do we want to delete.
Now we need to make sure that to do delete handler can be called from inside the To Do list.
And again we can use props for this and add the on the lead to do prop here and point at the to do delete
handler.
But of course typescript isn't too happy about that because on the to do list props we're not saying
anything about this on delete to do prop here.
Let's change this in to do list TSX let's add on the lead to do as a prop and this will now point at
a function.
So we need a function type here a function which eventually returns nothing so wide but which gets the
idea of that to be deleted to do as a parameter.
Now the error in the app component is gone and now as an adjustment we need to make sure that this function
is getting called when this button is getting clicked for that we can point at props on the lead to
do and not execute this but instead just point at it so that this function of a receiving on this prop
will be called when I click on this button occurs.
The only problem with this approach of course is that here on this function we expect to get the to
do idea as a parameter.
Now to ensure that this works we can simply use bind here.
I don't care about the this keyword in the to be called function so I'll set it to null but this second
argument we pass to bind will be the first parameter received in on the lead to do and that should be
the idea of the to do so to do dot I.D. here with that it should work.
We now safeties and I add finish the course and finish it in one month if I click on delete here that's
gone and that's gone.
So this not all works.
Now I just want to polish this add a little bit of a nicer styling to it and here after we're done with
this basic application here.