‫Deleting a city is the next feature
‫that we're gonna implement.
‫And I promise it's gonna be a lot faster
‫than the previous ones.
‫So, all that we need to do is to create a function
‫that will delete a city from the API
‫and here from the state, and then just call that function
‫when we click on this button.
‫All right.
‫So, let's first set up the event handler on that button.
‫And so, that button is located inside of each city item.
‫So, we already have that right here.
‫So, here, we're going to need the onClick event handler.
‫And for now, the only thing that I want to do
‫is to log something to the console
‫just so we can see something.
‫So, because what I want to demonstrate is
‫watch what happens when I click now here on this button.
‫So, it logs to the console
‫but also it goes here to this city's page, right?
‫And the reason for that is that by clicking on this button,
‫we are at the same time also clicking on the link.
‫And so, we need to prevent that from happening first.
‫So, let's create a handleClick function
‫and then just create that here.
‫And so, here, this needs to receive the current event,
‫so that then we can do e.preventDefault, like this.
‫All right, and if we now log something
‫to the console again, let's quickly reload.
‫So, if we click here now again,
‫then that should only log that to the console
‫but not go there.
‫And indeed, that's how it works.
‫So, now, the link is no longer clicked
‫but really only the button.
‫And so, now, here we want to call that function
‫in this place where we delete the item.
‫And so, since this is again about our city's data,
‫we go back to our city's context
‫and then let's just copy paste this function once more.
‫Let's call it deleteCity.
‫And here, all we need is an ID
‫and then we submit a request to the URL with that ID.
‫And here, the method is going to be delete.
‫So, we don't need any of this and we also don't need this.
‫And here, let's change the message.
‫There's an error deleting city.
‫And here, let's also say that there was an error
‫creating the city.
‫All right, so, here we are deleting the city
‫with the ID from the API.
‫And then here, also, we need to again, delete it
‫from the city's state.
‫So, just like many times before,
‫deleting is basically to filter
‫because we want the new array to be shorter
‫than the current one.
‫So, we say cities.filter.
‫And then we want all the cities where the city.id
‫is different from the one that was passed in.
‫So, just like this and then here, we don't even need
‫to store the results of this,
‫and I think that should be good.
‫So, let's pass that into our context, deleteCity.
‫And then of course, here, we need to get that.
‫So, we already have currentCity.
‫And so, then let's also get deleteCity.
‫And then all we need to do is to call deleteCity here
‫with the current ID, and that's gonna be it.
‫Now, what's gonna happen is that this will then
‫of course, update here, the loading state,
‫and therefore, our entire list here
‫will then appear as loading.
‫So, let's see if that works.
‫And yeah, that city is gone.
‫Try that again and again and again.
‫And so, now, we are back at our initial state
‫and let's just reload to make sure that it also was deleted
‫from the API and it looks like it was.
‫Nice. So, a very important feature.
‫And now, that is also completed.
‫So, we're almost done now with this project.
‫It's already working really nicely.
‫So, I'm really, really enjoying working on this.
‫And what I want to do next is to convert
‫this state management that we have going on here
‫to a reducer.
‫So, that's a common pattern that you will see together
‫with the context API.
‫And so, I want to show you how to do that
‫in the next lecture.