 Hello, this is Christian. In this video, we're going to continue better this app. Now, last time we added this data already, so it's working nicely, we are going to perform the delete operation for this app. And since this is the easier one, and then we'll do the edit and the add new ones much later. Okay, so I'm going to close this now. I don't need a bootstrap anymore. Alright, so let's go into our code in here. Again, this is the app.js file. Now we're going to update this delete when we do a delete. Remember, we passed the ID from down here to the delete function, then we pass ID whatever the ID is, and we need to go and find that ID and just delete it, remove it. Now, our data, if you look at the flight data, looks like this, right? So this is the ID. If you pass in the ID of 6 or 5 or 4, whatever it is, then we need to delete that. Now, how do you do this, right? Because the ID does not match the index. Well, you can say, okay, well, the first one is index 0, ID is 1. So we can say, if it's index, if ID is 1, then we'd recommend that I get index 0. Well, it only works for this case. What if I change this ID to be something like that, right? It no longer works. So what I'm going to do is going to match this ID here. Match the ID. If it's matched, then return the ID, the index of this ID, what the ID is found. Return the index back, and then we'll splice it, right? We'll splice it at this particular location here, and we'll just remove it from the list, okay? So that is the plan for this part of the assignment. So, okay, so let's just say that if I go back to the ID here, I'm going to show you, so it has a lot of fields, and we're looking for the field of ID, right? So if I go to the browser, I'm just going to show you how this works so we can implement this. I'm going to press F12, and let's say that in the console here, I'm going to go, it looks kind of large, you can see here. So if I do a, let's just say I have data is equal to a array list of some data, so put here ID, ID, and then we'll put 1, 2, and then a second group, ID again of 5, 5, and then we'll just do one more, okay? ID field of 7. All right, so that's how ID, our data, right? So it has this data in there, and if I want to check the key, there's a function called find key. So if I say let key, k equal key, return the key, the index, actually it should be index, the index where the key matches, find the key, find the index, and as you can see it's a function, so you can pass in the function for every element, I call it e, and when there is a match between the e of id equals to the number id of, let's just say 55, right? If that matches, it's going to return that data back to me. And if I do id x, you'll see that it matches the first index, which is 555, okay? So if I do it again, if I put 155, it doesn't match and I get a negative 1, there's no match, okay? And then, so once I found a match, 55 matches 1 here if we saw that, so you can do a splice now, you can say data.splice at the idx position and I just want one of them. If you want to put, if you don't put anything here, it's going to splice everything from that point up to the end of the list. So if you just want one, you just put one here, that's the quantity of the lesion elements. And if I do that, you see that now data has been spliced and I lost the 255 id, the index of the second position. Boy, it should have removed that. Well, because I did not, I did not, it removed id 7, yeah, 1 over here, 0, 1 and 2. Yeah, it removed the one after that. Okay, so yeah, if you moved it, it sliced it and so that's the idea you want to use to slice a data in here, okay? So let's go and see how this is done in the code. But before I go there, I want to make sure that you understand what happened here because I just realized that I changed the index to minus 1, okay? So the minus 1 here, because I spliced it with the minus 1, that means if minus 1 index, you're actually counting from the opposite direction. So from the right side, that's why this 7 was chopped off because the index minus 1 is from the right side, okay? Otherwise, the 55 should have been removed instead of the 7, okay? So let's close that and let's go and see how this works. So in here, the same idea. I want to get the id. I'm going to set a temp. I'll just say let temp equals to this data, flight data, right? So this, that, state, flight data. And then I'm going to find the key. So select index is equal to the temp.findindex. And I'm going to pass the flight data. So I'll just put flight here. And then the flight data, flight ID matches this id, okay? And then I'm not too concerned about the strict type. Let's see what happens. Actually, just the value will be fine. And if that's the case, then we turn the index back at the index position. And then we now want to say temp, that splice, index, and then only 1 from that list. And finally, we need to update the state. So this set state, I'm going to pass in here. I'm going to modify the flight data with the new temp data. As you can see, this part here, actually, we are actually making a new set of data for the flight data. So therefore, we touched the state, we touched it, and it's no longer pure, right? So it's impure now because it's not pure. React will have to re-render the DOM. And that's how this works. If it's pure, then it doesn't do anything because it just says that, oh, nothing changes. So therefore, do nothing. But once a data has been touched, either one of these, doesn't matter which one. As long as the state has been altered, then it will be rendered DOM. And that's what we did here. That's what this function does. It makes this state impure. And so now we are now good to go. And let's go and see if this one works. So here we go. And just refresh it to make sure we are correct. And also show the console to show the output of the ID that we will be deleting. I'm going to delete Alaska Airlines number four. Okay, so you see the ID four is going to be moved. And it's also removed from the list here. All right, notice the index did not get reshuffled because we did not use the index. These are the actual ID in the list. So if I move the number two, that's going to be moved. If I go and move number 10, and so forth. So here we go. We just did the crowd operations for the delete. All right. So, pretty good. Now, the next thing I want to do is since we are here already, I'm going to move this data and add it to a child component. You know what? I'm thinking maybe I would do that in a separate video. So, so far for now, the delete is working correctly. So we do that in the next video by moving this, all these things here to a child component.