 Hello, this is Christian in this video. We continue from the previous video. We did the delete operation here. As you can see, I am able to delete my data here using a very simple function. And so now we're going to go and refactor this list here and put it to a child component. So let's go to the code. So this is what we have for our app.js. As you can see, this is the root component. So it's not a good idea to put it here because it's going to get really cluttered. And we're going to move all this into a child component. So let's go to the component here and I can create a new one. We'll call it flightList.js. So inside this list here, I will pretty much import my React.js. Let me react component. And then that's good enough for now. The name of this will be just a... We can use it as a... I'll just use the function component for now. And if we need to do something else later on, we can decide to add it, but for now it would just be a function component. So you can use the regular function like this called flightList, right? Or you can use the ES6 using the variable flightList equals that and then use the error function. That's fine, too, either way. Well, since we do here, I'll just leave it like this. And then now we need to add in here the props. We'll be receiving that from the parent. And then here we just have a return statement. Return everything to the parent or to the DOM, really. Okay, so in here, let's go to the app.js. I'm going to remove everything from... Let's see. Pretty much everything here from line 27. Collapse this all the way down to line 83. So I can just do... I'm not sure if this will let me do it. Oh, yeah, it did. Okay. So let me cut everything there, the whole thing, and move it to this flight list right in here. And I'll just do a right-click to format the document. Save that file, go back to the app.js. Now in here, we're going to replace this with the flightList. And I have to import it up here first. So up here, I'm going to import the flightList from the components in the flightList. And so now we're good. So I used the flightList here. I'm going to pass the data to this flightList. I'm going to pass through a probably called flightData, the same name, assigned to this.stateFlightData. Because I'm changing the state, we also pass in the function called deleteFlight. So that can be used in the child component. I use the same function name. DeleteFlight is equal to this.deleteFlight. Let me close this over here in the tab. So I pass these two properties to my flight component. And once I go to the flightList, I need to make a few adjustments in here. Now the first thing is that this is no longer a class, so I cannot use this in here. And also the state is not available in here either. So I get this information, the same name I used, from the props. So I can replace all of these, both of these with the word props. So anywhere else I use this and replace it with props. PropsDeleteFlight. And I think that's all I need to do here, as you can see. Very, very short here. But I'm going to move this over to another component. I'll call this, let me just cut it out and I'll put it down here at the bottom, since it's a child component. So I'll call it, before I forget, we should export this out first, ExportDefaultFlightList. So right above here I have the child component. Let's say let table, head, I guess something like that. And then return this. This is the table head, where I click document format. So I did not pass any data to it, so just do it as is. And then go back to where I cut that out, right in here, and replace it with table head. So here we go. And then this is the T-body. So same thing, I could do this as well. So I can copy this whole T-body here, from here to here, cut it out, and then we'll put it down below the T-head down here. So let T-table-body, and I'm going to need a props, because I have some data in the props. So return this whole thing here, and just I can right click format. Okay, so now the props goes in here, but then you see that props.delete, right? So I did pass exactly the same as I did in the parent to this child component. So here again, right here, I'll call it T-table-body. I'm going to pass in the flight data, props of flight data, and then the function as well. So delete flight. And you can do it in a couple of ways. You don't have to do the way I did here. You can add it to a single object, and then pass it that way as a one single object. You know what I mean? You can recreate this whole thing, put it into an object first, and then you pass this one single object down here. Okay, this is less for typing. But since I already had this set up this way, then now it's all set up the way it is. And if nothing is broken, then it should just work just like we had in the original version. So let's save this and see if this still works. All right, so let's go to the view. And if there are any errors, it will tell us. So we'll refresh that and delete number two. As you can see, it's still working just very nicely as before. And press F12 just to make sure no errors on the console. And let me delete this here. So far so good. If you press the components tab here, you should see the different types of components we added to our flight list. So we added two child components for the app, the nav, and the flight list. Now the flight list has, actually three at the footer, has two child components, the table head and table body. So there we go. It looks pretty nice. In the next video, we're going to, I think we are pretty much done with this example here. So we'll see if we can add something to this.