- [Instructor] Let's go ahead
and add the functionality to delete these items.
So in order to do that,
I'm going to need to modify this appointment info
and add a method that takes care of that.
So right here, I'm going to say,
whenever somebody clicks on this item
then I'm going to execute an expression here.
This is going to create an arrow function
that calls this new method
that I'm going to create called onDeleteAppointment
and it's going to pass along the appointment ID.
So sometimes you create things that live
within the different components.
So for example, when we did the toggling,
the parent component didn't need to know
about toggling something on and off inside a component
but sometimes you do want to communicate
with the parent component.
In this case, we're going to be changing the data itself.
So the parent component is going to manage all that data
and we'll need to pass this along.
Now that means that we will need to put it in here as well
so that it knows to send it back up to the parent component
and let's go ahead and save that
and then we'll go to the parent component
and here's a place where we're calling the appointment list
and so what we'll do is go ahead and pass along
or really in this case, receive that
on the lead appointment method
and once again, it's going to be an expression.
Now this is going to be a little bit complicated.
We could create a separate function to handle this
but it's short enough that we can take care of it here.
So whenever this event triggers,
we're going to receive an appointment ID
and then we will create an arrow function.
This is going to use our set appointment list method.
That is part of the state management.
So when you create useState,
you create this method called set appointment list
and that's what we're using here
and what we'll do is
we will take the appointment list, the current one
and then use the JavaScript filter method
to remove any items that match the ID that we get past.
So we will receive that
into a temporary variable called appointment
and then make sure that the appointment ID matches
the one that we received
whenever somebody clicks on that element.
Okay, let's see, we can break this down.
We'll just do it right here
just to make it fit a little bit better on our screen.
All right, so let's check to see if that's working.
So if we take a look at our list,
we should be able to click on any one of these
and it will remove the data from our list.