 Hi, this is Kris Jin. So welcome in this video. We're going to implement the edit flight feature So here is the react application Also, make sure that in your home component, this is the home component here, you know, add some stuff to your website make it You know lively and interactive as possible. So basically I just add two images here now also the about page I mean just add something there and then the list here last time We already had the add component Feature added so you're able to add data to your site and now we're going to implement this edit feature So when you click on the edit button here, as you will see in the URL It's going to load the edit path with the ID field of one and then so forth Okay, if you don't grab that one and we're going to load the data and preview a form That will look very similar identical to the ad form here. In fact, it is exactly the same form Only thing is that we're going to pre-field this form with the data we pull from the flight list. Okay So before we start though, I want to make sure that we understand a high overview of what this looks like So we're going to go back to the blackboard and look at this Diagram down here. Okay. So here is a workflow diagram I put here So maybe it will help you understand a little better. We're going to create two additional Components, of course the app.js here is the root component and we're going to embed The the edit flag component inside this app.js component. Okay, so the app.js is the root component and we're going to add that into the You know the route so you will follow a route that will take us to the edit flight The edit flight is the child component that will contain the I guess business logic So with the functionality that will process the data to form and you know pass that data for up to the parent Okay, and then in the edit flight there I'm also going to break out the form to another component called edit flight form Okay, so all this one has is basically just the form itself and the reason why I do this is because Um, the form has about six or eight fields and it'll make this file really bloated So you can break it out into the another component. So it's just easier to you know separate things. Okay um, so as you can see here The data source is contained or is maintained in the root component So we don't want to have too many copies all over the place What we want to do is you pass the data source from the parent component or the root component Down to the child component here. So we pass down here the flight data Okay, we make an estate in the app js file We also pass down A function. This is also a callback function that we pass down to the child component call the update flight Down the property here as well through the props because we want to be able to Allow the child component to update the data Via this update function. Okay, so you pass that down here And then in this edit flag component We're going to create the edit form and then through this form here We just need two things basically the flight data the single flight data That is needed to pre-fill the form field As you can see here and then also we need a new flight That contains the references to each of the form controls here Okay, so again, this is an example of using the uncontrolled component Otherwise, you won't be a little bit differently here. So again, the purpose of this exercise is to have the experience uncontrolled components and control components right, so And and you know in terms of design The uncontrolled component may not be efficient in this example, but Again, just to make sure you have Enough experience to use both flavors Okay, so using the design then we're going to go and create our components Here again, I already put some code in here. So I'm going to do you want to create an edit flag js file We're going to import it to the app js and we're going to create a route It will look similar to this So you should have already created your routes for all your path I put it here just I'm showing just the one for the edit here because we are going to You know pass data and the parameters to a component We're going to create a wrapper components component. This is a component. So That will be that will pass the parameters To the edit flight so we can capture these parameters in the url Okay, as opposed to if you don't do that then it's a little bit different, but And that's how this is how you actually pass data to that parameter. Okay And yeah, so again read some reading more information here But we're going to go ahead and then implement the app js and then the other component just like you see here Okay, so let's go back to our code and start coding So back in here I'll make sure your app is already running like you already saw and I'm going to open the app js file Okay, I need here So as you can see, we have you know added All these components here already if you have not created your bow on your homepage, make sure you create those Also And then we last time you already created your app flag component, right? So you would add data to that And here is the state for that as well your state. I have the the map data and the flight data here We did the little button to show form There again a couple ways to do that, but that's just that's what you you would have done that already And then this is the the route. Okay, notice everything we have to route here Follow up at the route here. I'm using the version six So if you follow the older videos You might have seen a switch as opposed to routes That's the older version. So the router down version six use a different pattern deliberately So this is based on the the newer version Okay, so here is the ad flight for the flight information We have the ad component here. We have the about in the home So notice I put two paths here for the home The backslash is the route directory That takes you to home page and also just add it. So if you type slash home, that should also take you there as well Okay, so just for convenience And therefore we no longer need this because we are now able to use rout So you should be able to add an ad flight, you know edit flight show other Elements using routes. Okay, so this is the route here This is the path that goes to that pattern that loads the loads the component and the element property. Okay so um and then my uh Functions I put in bottom because it's just cleaner down this way. So we had the ad component We had a delete which we will also need to implement and the delete all If you want to delete all your data, you can do that as well But we're gonna add a function here to do the update. So actually let me do the format like this Okay But before we do that, um, let's see. What do we need to do? Okay All right, so let's go ahead and create a component called edit. So I'm going to go in here Here's our ad flight component. So notice also in my ad flight ad flight All right ad flight here. I break the form Into another component. I call it ad flight form Okay, so this is the ad flight form here So we'll be using exactly the same form We're just going to modify this a little bit because we're not going to use the control component anymore, right? We use the uncontrolled method. So we'll just make some tweaks in here and to make it the uncontrolled method Okay, so uh, first thing is I want to um Go into the App here. I'm going to create a component and you can create it, you know using code using the command or You can just create it manually um So I'm going to just create one here called edit flight dot j s Okay, so I'm going to copy the one I have in the ad flight and we'll look to the console I would just just this part basically. Okay. I'm not going to need any of this stuff here. Um, yet We're not going to do any validation yet later So the ad flight we need that one there And both of these are going to be just function components And the reason is because we're not going to retain any state Right the ad form notice that we use the class component because we actually contain states here For the app data, but the edit flight I'm not going to use the state at all because the state is actually coming from the parent So we don't really need a state in this example here Okay, so we're going to go ahead and create our edit flight and I will use the export function You can export right away. You don't have to export the bottom So so you don't forget edit flight And we're going to put here a props Then that is the function Um, so actually I might yeah, I need this because So usually you don't need I need it because I want to intercept or get the id from the url Okay, so you go through that using the Um, also create references you need that as well. Okay So in here, what do I need in this application? So I have a return statement here Okay, and then I just put that before I forget and then inside here Um, you're going to do something right it's going to put something like a A div someone copy my div from my diff here They're the main diff when it looks similar to this one Okay, I'm going to copy everything here. So it has a similar output all the classes here I don't have to you know, you do all those stuff It looks like that. I'm not going to use any of this stuff for now Okay, it will look just like that and um, I'll just say not active flight let's put Uh, not edit but add it up edit flight here Okay edit flight Yeah, that's fine And here I will probably I don't need this stuff here We'll just put what the form right in here. Okay So this is the add edit flight And um, so what do we need? Okay, so before we do that, let's go to the app.js I'm going to close this now To the app.js the root component we're going to import that in here. Okay, so we gather we're going to import The I'm going to copy you just copy this one here And put right below it And this is the edit flight So it would be edit flight edit flight Okay, we got our edit flight there and then now we're going to add a path right in here Again, the path will be similar to what you saw on blackboard So you can just copy and paste in here is fine, too. And um, I'm going to just retype it so it's Yeah, I'm going to retype what happened blackboard. So just it just faster Uh, maybe just gonna copy and paste. Okay, we'll make it a little bit faster. So you don't have to retype this. Oh, no, yeah Okay, so we're here. I'm going to copy this part Okay, this is the constant wrapper function and we'll paste it back into the code Right inside the return the render function here Okay Um, yeah, and then we need to import this in a minute But let's go back and create the path So as you can see, it's in a render function and then the path route will look something like this or copy this Add that into the route writing here Okay, so this is our Path will go to the edit uh URL with an id So the colon id here is the parameter that we'll need to access and the edit flag component So here you can see that we are adding We're going to need a use parameter. This is need to be imported So you can I think if there's a quick fix you can do that and it will ask you to Import it doesn't go to that It doesn't let you do usually if you type it wouldn't put automatically up here Um Yeah, right in here. Okay, if it's not here You can retype it sometimes it will do that for you. For example, if I go here type in use program like that And then you will see that it automatically adds it for you up here Okay, if it's not just manually type it and put inside the react router down up here. Okay And again, this is used for passing parameters to your flight edit flight Okay, so here we have the edit flight. We have the wrapper component We add the flights here. We pass the data the flight data, which is coming from the state Just like the edit just like the other ones here The flight data contains the entire list of flight We have a function to update the flight. We don't have it yet So we're going to go and create a function call update flight And I'm going to go to the bottom here And uh, create a function right down here call it um Update flight. Yeah, I could just go update flights fine update Okay, so we call it update flight And we're going to use the error function here. So what we need back is the index And the updated flight Data, okay, I'll call that. So it's easy to understand It's easy to see, you know use meaningful variables here And then what I have in here is the following. So I'm going to get a Let's see Okay, okay, so we'll implement this a little bit later. Okay to do here We have the function ready when when the data comes back from the child component We need to pass the index because we need to search Where the ID is in the index and we want to put the index Then all I have to do is really simple. We just update that Actually, we can do it right now. It's actually really simple Right. So we got the we got the data coming back And we're going to basically, um, load a copy Up with your constant copy of the flight From this state that flight data, okay Entire new flight and what we do is we're going to put I'll call the same name. Okay, so I don't have to You know, we name it differently down there And I'm going to get the flight data Of the index Okay, can be assigned with the updated flight Okay, that's it right and they're going to just basically call the set state And we're going to update the flight data Right, so remember again, I used the same name so that I don't have to do this right I don't want to do that twice right because if you use different name You have to do that. Okay. So again, just a review So now I update on my state and basically that is it Right, very simple to update data Okay, so we save that And then now up here We already got this finished already. We pass the data we pass the state. Okay, great Now we have the parameter here that is also pass along inside the props over here We see that that that is a called, um, deep, um Uh, what I call the rest of rest of parameters is that's our operator is a spread operator Go through the props and then go to the parameters just a A common feature to do that and react And then now we pretty much kind of almost done with this one already And so let's go to the edit flight now when we call this function We need to retrieve the data the id from the URL right so we're going to create here a constant id We get that from the use program the same as before This use program is an object. Okay, if you if you if you see, I'm not sure if it shows this but Usually has a lot a lot of parameters and one of these parameters we're interested in Is the id field? Okay, so this id Is really this id right here So if you call it, you know, a a a Then you call it a a a a. Okay, you get that from the url through this function here So, um, that's why it's called id Now I did the way I did here I You can do this or you can also do this you can wrap this And sell it square curled like this and then remove the id over here What you're getting is basically what's called Destructuring right you just destructuring the entire object here. This is returning an object One of these fields is the id field. Okay, so I'm basically grabbing the id from this, you know Parameters function and and do that Okay You can do that which is fine The only thing about this though is that make sure that when we do a search in the url While we in the data file We need to convert this to integer like a number because our data if you look inside our model data Okay, these are numbers right not strings. So if you compare strings and numbers, you're not going to find it When you compare so make sure that when you do a search you have to convert it to You know In here That's why what I want to do here is I want to grab an id here And then I want to wrap the whole thing Like this inside the end part, right? And So I want to convert it right away. And so if you if you do this way you cannot use the Curly's here, okay So I'll basically create the id and pull that from the id you grab the id and then right away convert it to an integer that's what I'm doing Okay, so now we've got that id. What's next? Well, now we need to look inside the the id the data To find the index position. So I would do a constant index here I'll look inside the props that Data, okay This flight data comes from are you remember comes from here? This is the one contains the entire object of our flight look inside this list Basically in here and find a matching id once they found an id. I'm going to pull this entire record out Right. So I need to find the index position here The index the ids are just named in a very simply one two three four five But this could be like a thousand time That also technically could be a random number. So we need to match this id and then pull that record out So I'm sure you we did this before Okay, so that's the whole idea. So we use a five index function I'm going to pass in here. So every object in the in that list Match the object id against this id Okay, if it matches Then it will return a the index position If there's no match it will return a negative one Okay, so this is where comparison is important. I mentioned here if you do not do in parts here You have to in parts this id Okay, if you don't do that, it's not going to match because unless it's a string So you have to do one the other way. Okay, they have to go the same type I want to make sure they are the same type. They use their strict mode to test make sure it's the same same type Okay, so once we got that id then now we need to Find the flight from the index. So I'll create a constant flight There's a single flight. I'll look inside props dot flight data Of that index So I gather flight data and then now I'm going to use that to pass data over Okay, so again You have to check to make sure it's there, right? It's not guaranteed It could be it could it could not be there if it's not if it's negative one You're not going to get any flight data and your page will crash. So you have to handle that So ideally you want to do something like, you know, provide a default Default flight information. Maybe if it's not found there, you always you can create a default variable Would just empty forms or something like that If from data or you always pull the first record Okay, just just so that the page doesn't crash but again explain why is that Okay, so I mean what I do is this so so for example, you want to check to say if the index It's not equal to a negative one, right? It is if that's not the case then go ahead and assign that to that new flight otherwise And you want to put a flight is equal to maybe props of flight data Of the first one index one. So this is like the default here, right? And I can't pull const because of that nature. So I put var here Okay, so either either that or that Or we reward that right Usually this is not equal. You know, actually you do this you pull this one here Pull this outside like this Right, you can call it. Um, yeah, let is fine and then Inside here then you don't need the else. Okay, either one or the other right, you know for sure that if it's not there Then it would be the default if it's there that you will overwrite that with a new one Okay, so again this part here is how it's done. You saw the if and else If you want to make it shorter, you can also do this So you can do like Flight is equal to you can put a comparison Okay, I'll be right here We'll say and we'll comment this out. Okay If you like this approach to say a constant flight is equal to you do a comparison, right? Index is not equal to a minus one if that is true Then you put the flight of the index again using the turning operator. Otherwise You go ahead and pull the default which is the zero. Okay, so this is also how you could achieve the same idea Okay, so I'll keep it this way and see if this is working or not So I got my ID my flight information. That's all I need and then now I'm ready to go and I create another Reference so now we go to create the form first. So before Actually, you know, let's create the new form Object to bind to each of the form elements Um, you know, maybe we should do that first. Let's copy the add a flight form here The ad form here uses a function, which is good. I'm going to copy this and just rename it. Okay So copy and paste right in here or rename it to edit Like one touch a s Okay, so this edit form and so here is going to change it to edit flight form And I don't need all these. Yeah. Oh, yeah, the flight data props Uh, you can leave it as is but um, I'm gonna I'm gonna leave it all out make it clean short And you can export this out right away And if you export that already then they don't want to do it again the bottom. Okay, so down here just don't don't do it twice You can do it at the top Okay, so now we got the props and we just go ahead and do some cleaning here first Let me let's do this while we're here. Okay. So again, we're using reference. So, um Actually, you know, I actually know where to go up here first. I'm gonna close all these ad now Okay, so the flight data as you can see will look something like this. I'm going to copy one of these And I'm going to add it to my edit flight We're going to create a reference object. So we'll call it like, um constant new flight or Just information And this will actually equal to this new flight like this. We look like this format this Okay, but we don't want to put the data here. So instead this will actually be reference type. So we're going to use a react That create ref Okay, for all of them. So basically all these are the same We're just going to initialize this and bind these To the form. So we do that and Then we are now good to go Okay, and All right, so this is our flight. Let me put over here. I guess it makes more sense that way And let's put it this way All right. So this is our new flight references and we're going to bind this to the form control Uh over here. So over here. We'll bind it to the Uh control here. So that's our new flight The data and then now that we had our flight form. We need to import it in here. So up here. I'm going to import the flight me edit flight form very good From the edit flight form. Okay, perfect. And then So down here, we're going to use it right in here Then we'll display that inside here. So we're going to pass in to edit flight form Also before forget we need the flight information that's coming from the flight That's this letter here. We found a flight already We need to use that to pre-fill populate the form We also need to, you know, get all these references so we can bind to each component So we need the new flight as well Again, just very simple to flight Okay, not only that we need to also include the submit Handle a function because in the parent class I mean, yeah the parent class the editor here Right, we're going to have a a function to handle the submit when the user submit the data It needs to come back here. So we need to create a function to do that. Um, So let's do that That's to write in here as well Create a function call handle submit Use their function. It's going to take a event Or just e for short Then we're going to do a e that I'll prevent you for right away before we forget So we do the handle submission here and eventually we're going to do is we're going to process the Function I'm going to call this function Update flight in there Okay, so we need to pass this down over to the child as well. So we need to put here handle submit Hey, so three things are going down to the child component And I think that is good for now So we save this for now and then now we're going to go to the child component Which is this edit from here and we're going to change these okay So we need to change the value here to a default value And the data coming in is going to be coming up the props. So instead of just flight We just props that flight Okay, this flight here is referring to this flight right here Okay, so we have to flight We have the new flight and we have the handle submit coming from this parent component So in here where all these are we're just just going to basically replace Value with the default value. Okay. Okay has to be a default value. We're going to bind that to the props flight And then we're not going to have the handle change by the way Okay, we because this is not a control component. We don't want to do that I mean you can't you want to but in this example here, we're not going to do that Okay, so the id field also I don't want to Allow user to change the id we can display there, but we want to be read only So this is the only field that you add the read only attribute Right here. Okay for the id field so that you cannot edit that field the rest should be editable So we got there and then so we can remove that and this would be the default value and props Flight airline And then same thing here We're not going to do any unchange So it'll be default value. This is already kind of Created for us. So that's good That's fine. So I'm here again default value props.flight and then no handle change delete that one Same thing here Then remove the handle change and a few more default value props that flight departure date No change change Okay, and then finally down here is the handle submit also coming from the props Okay, so as you can see it looks very similar to the ad form Right. We just basically changing the to default value remove the unchange and then that thing is now good to go Now the next thing we want to do is now so then the data here is bound to The um is you would you would see that the value would be pretty popular with this data if it's correct. Okay And then now the next thing we'll do is we need to bind to the reference So that's the next thing we're going to do for each of these fields We're going to bind to the reference attribute and we're going to be equal to the props That new flight So it'll be the exactly same as this Except it's from a new flight. That is this guy right here This guy is binding to each of these Fields and this is the reference type so that we actually know Which property binds to which component? Okay, so by doing this way That's what we don't need to do like document that k element by d and so forth It will it will automatically bind that field for us Okay, so I want to copy this again and go to every field down here And we're going to change it a little bit later. I want to do this for now So That one this one here all you basically all the input fields And Okay, so we're going to change this to be the return date This is departure date like number 90, okay, so it's all bound to that reference object So we can save this one for now And I think that is it for this simple one We shall see If it's working or not. Okay So the added flight has the data coming in here. We're not doing anything yet For now we can we can you know display some data In a minute Uh, okay, so let's see Yeah, I'm curious. I'm curious to see what's like. So let's go and save this and Recheck our application to see if it's if it's working still Okay, so you crash is here refresh it again Okay, so uh components added flight Uh puzzle export edit flat. Okay a product. Did I do it wrong? Okay, let's do again. I forget maybe I forgot to put the default or something Yeah, when you export. Yeah, you have to say export default I forgot that word here for that one The edit flat also and if you say export default Okay, let's try again And here we go Okay edit flight form puzzle export default Okay line 47 Right, so let's try one more time Um 47 Wonder I didn't like it or not. You know, okay fine. We'll just do the whole way down I'm not sure why I thought I should be able to do that but Okay, so we export the bottom. It's okay the um edit Uh flight Here And then we need to also export Edit flight form Bottom here for the bottom Okay, so let's see if that likes it. Okay, let's see one more time Yeah, I knew that was not the right correct one. It should be allowed it allowed. Maybe I just had it incorrectly imported. Um The edit flat let's try one more time when I import The edit flight edit flight former It is coming in What I do wrong. Okay. Let's let's fix this What I do here edit flight add form No curlies. Okay. Okay. Okay. There you are All right, so that's the case and that was it so before it was okay If you leave it export default function here should be fine. It was not the errors. I had it wrong So that mean my app is also. Yeah, it should be correct Okay, great So now that's true one more time. There we go Okay, so in the edit here as you can see we go to edit And nothing shows up yet, which is fine, right? You expect to have some errors And we're going to do f12 and see what's going on you can inspect there here So refresh a few times Go to edit and we'll tell you ever right away. So the very first one on top We'll tell you so it cannot read probably it's undefined reading zero. Okay edit flight like 16s if you click on that It's basically from here saying that Um We did not find the flight of zero Uh, that means that the flight index doesn't exist I mistyped the word flight see you can see here. It should be flight enough fight data So um, so that's very very, um Add on me But i'm surprised the browser didn't even uh, let me catch that so this would be flight data And I think that's okay now One more time Okay, here we go. You see the data is it's up and populated Right, so refresh this again once you do that notice if you refresh it you lose all your layout So that's that's just because I'm refreshing you load the whole thing halfway through We did that from the beginning so you lost your design So I want you to do this case you go back to your flight on the other pages And refresh that to get the same low back. Okay, and then now You click edit. So here we go. So our form is now pre populated with the data that we need So again, notice this is a grayed out because we read we made that to read only So you're not going to be able to edit this field. Okay, these are okay if I change some data here Okay, I should be able to do all that stuff here and submit once I click to submit here It's going to update the data. Maybe I'll show it or hide the form Like I did with the add a component and just say edit it successfully And you go back to the fly you should be able to see the changes occur here Okay, we don't implement that here, but okay, so you see the night's working right if I go to flight number three It does low flight three. All right. So again, I will show you the little tiny error where you forgot if you forgot to do the parts So let's see if I do not do the parts here okay Because if that's the case it is not going to match, you know The type and the integer to a string it's going to fail You just gonna give you a negative one index and and make sure I put it here just in case you might forget So that it's going to load the first object all the time Okay, say that go back here and you will see that if I refresh it again if I load Number four, right? You see I always grab the first one because it will never match it Okay, so if you don't take care of that, it will crash your site. So again, just parse it back in here just in case Okay, so we got the from data field and all good to go now we click this submit button All right, we click submit. Let me let me um Yeah, I can do it down the bottom here when I said click submit It's not called the function handle submit notice I did not pass anything to it because all the data fields are bound to this new flight object Right to the reference property here. So we click the submit Then back in here is going to call this function up in the parent right here, right? Which is in here and we're going to use your prevent default So your form doesn't reload if it reloads you all your data is gone When we do that first and then now how do you get the data from this new guy? Okay, you cannot just go and You know submit this back to the parent the route you have to get the data from that field and so You can just basically update this flight data because initially This is the single flight that has the information that we need to pre-populate our form But because we've never updated, you know, it keeps the old data It would never touched it because you know, we didn't really do any change to that So now you can basically reassign the data from these fields to this objects data Okay, so that is how are we going to do this? So, um Just to see what the data looks like you can console log Actually, yeah console if you console log um A new flight data, okay I don't think you can see anything there if you click on that And go and uh to the browser. Let's say we go to edit the flight number one And if I click submit Okay, you see here it comes in here like an object. Okay, so here it comes here is still I didn't I didn't make any changes, but that is the the case. Let's clear this again And let's go back and clear again And let's load a new flight. Let's say I'm changing one to be four five six seven eight Okay, and then like x something I just go x a bunch of x here. Okay, and if we click submit Okay, so you see down here this object and make it a little bit bigger You can see that each of these has the airline Okay, so notice has the current property That is we're going to get the data from the current is pointing to that particular input tag Right each of these tag is assigned to each of these Current attributes so the airline as you can see current And the value is indeed a line x right because now we changed that it's bound to that property. So we'll get the Whatever this is is new flight that airline that current that value will give you that right So you get like a couple Layers down so same thing with the other information at the airport The flight number I don't right so again No flight number under that current that value will give you the flight number as you can see here Okay, so that is the idea for this So now let's go back to the code and then we're going to update our new data. I'm going to turn this off Which is the flight so I'll do a flight Um The flight ID is we don't have to change that ID because we did not we did not even making the changes So we can do we need to touch that one. Basically just a flight number Right the flight number is assigned with the new flight That flight number that current that value Okay, that is basically all you have to do we do all of that again. So let me just duplicate this a couple times Uh, and then we fill all this in here. So we have the flight number. We have the the airline Here we have the trip time goes in here She here and also here Archer date Archer airport The arrival airport Archer time date Two more one more return date Okay, so that is the new information if it's hard to see I'm going to do this it's easy to see Okay, so here we go And um, that is the new information already. We're updating the flight data Which is this single flight here the original one with the new data And after that, we just basically pass it up to the function to the parent. So we invoke the function call What happened here? Let me format this Oh, okay. Oh, well it's ugly again. It's okay Uh through the props dot update flight Pass in here as you can see two things the index and the new flight rights the index And then the flight which is again just this flight here. Okay the index we already calculated up here Remember we found the index already here. So we need that position So you will know where to find where to update inside our um our add data as close this Okay, so we added we can pass the data To the update it goes up to the parent Which is This here go to update data. This function here is down here. We created down the bottom We go here. So down here takes the index and the update flight data the new flight And then we basically, you know, update the index position with the new data we update the state and then we're done Okay So let's see if this works Let's save that and go back to the browser And let's start fresh again and refresh everything here. So it's clean I'm gonna close this now and let's do the edit for the united here Let's put it here. One, two, three, four, five. Just put some Jibberish here. We know it's working. Okay, and click submit Okay, we didn't do any update any feedback. So we don't know but let's see if it's there Let's go to the flight list and now you see that the data has been updated. Okay And if you go to the next flight, right? Go back it should still be there and if you load this again, right? You have the right data that we added earlier. So it's it's functional Okay, so basically that's it. So now what I'm going to do is that when we submit the form We want to be able to show a successful one like this the f like here if we do a flight something like that I suppose I'm Jibberish in here. I do nothing in relation. So I should take whatever data I put in here If I click add But you want to see this screen here and the form should be wiped out and so when I go back to my list You'll see that at the bottom. We just added a new flight, right? Okay, so I want to do that for the edit flight as well Okay So let's go back to the code and do that little tiny feature Basically over here kind of similar to what you do with the show high button And so what I do is going to pass a parameter from the root component Okay, because this is not a Stayful component. So you did therefore you cannot do that really easily without using any hooks and we have a learning hooks yet So we don't do that. So in the app js component up here. I'm going to create another variable Like you see here, I create a variable called is submitted. Okay, I think this is the same one I use for Uh Somewhere else, but I created a function called is submitted and I have a function here also called reset submitted I'll make this so it's quicker for us to to run Basically, I'm all I'm doing is this so when I go down to the update after I update the data Once I update the state that I want to reset this that is submitted variable to true Okay, and then we need to pass this parameter down to the child component, which is right here again Right, so we need to pass this down to this as well So we're going to go right over here And if it's hard to see just break it to multiple line like this you can see them Okay, I'm going to do a Is submitted Is equal to this that is submitted Okay, I'm going to pass that down to the child component Because initially we set it to we set is variable to false I'm going to pass it down. So it's going to be false and down into the child component here The edit flight Where we show the form here, okay? So I want to put here a a message kind of similar to what we did The other one to wrap this with a prop Up is submitted If this is true, right? If this is true, then go ahead and load That edit form And you put that you put that colon right the question mark if it's true Then load that otherwise you put a color and then load a message down here And we'll put a paragraph message Which is similar to the edit the ad flight. So I'm going to go back to the ad flight form And basically copy this message Successful here right here. This is the green one copy that And put it into our edit flight right down here Okay, successfully updated Or updated successfully how you want to message here is fine So this is what you will show If it's um If it's true, right? So in this case, I want to say if it's not true Then load the form First once we click the submit then go ahead and you know, it's going to go up to the parent It comes back down. It's true. So therefore it's going to show this instead Okay, one step at a time. Let's see if this will work first. Okay. So again, let me show you go up to the parent and create its variable set it to false and pass it to the child component And then also added the update inside the update flight function And now let's go back to the page and see what happens. Let's go start all over again I'm going to add it here. I'm just going to click submit Okay, you can see that now the successfully updated here If I go back and let's try again And then here is the the dilemma, right? You see that it's still there because we'd never we'd never update the edit form Okay, because of that Therefore the content will always stay the same because we never update the flight either The component, right? So therefore this will always stays like this And so if I go back and load any one of them, it will say hey, it's already submitted Okay, how do we know this you could test on here you can test like over here when we Initially load and the edit flight it passes down to the edit flight and right before we you know Do all this stuff initially it's going to be false. So you can you can put a function here I mean you can console log this you can see Um console log the uh, we put it here at the um is submitted Right here, so we can see that the status Okay, so you can see what that looks like when we submit. So again, let's go back Okay, so let's refresh everything again And we'll hit f12 so you can see the data now here click edit Okay, we haven't so notice you can see that it is false. Okay now I'm going to go ahead and make some change like five five five Click submit You see that it goes back to the parent it comes back down and it's now the state of this variable is now true Okay, so if I go back and do another edit Right, you see that it will always remain true like two times already It was it's still true because we never touched that variable again. So we must Find a way to trigger that variable to be false after we submit Okay, so again, it's because we never touched it again. It will remain true all the way until that right, so how do we fix this And I'm sure there are a couple ways but one way I'm going to show you Is create another function to reset it So like in here When when we submit Okay, it becomes back down initially very first time It's false. So therefore it loads the form After we submit up there, it comes back down. It's now true. So it shows this message Once we are here, we need to invoke another function here to reset the submit A variable here you can't do it here again because this variable is not a reflector It's not It's not stable. So you have to submit it to the parent class Up here, which is why I create a variable up here called reset submit It's a function. Okay, it's error functions one parameter only I'm basically the I'm basically setting the submit variable to the value of pass to it Okay, so basically if it's false, and if it's true if it's true, we false when this case I want to be false all the time Um, so you can you can do that or you can just basically call it a false. It's fine Okay, so you don't you don't need a value if you don't want to that's okay, but just do that Okay, just put you know, by force it to be false and so down here and the edit flight When I do that after that message, I'm going to invoke the props that is submitted function And I'm going to just call that function. Okay, so Um, nice. Let me call it a reset reset is submit I did not pass that that in there reset is what I call it Reset submit. Okay, so copy that and now we need to also pass this down there as well Okay, we pass it down to the child component So we can invoke it to reset the default value back to false So down here then to call it reset submit invoke that function And it should trigger that to false. So the next cycle down you come through, right? Is it reset to false but it will not render this component Until you reload the next cycle through. So when you click the flight data, you come back in then it'll be false Okay, it's a little bit tricky there. So that's how you would do this for the example So let's go back and see if this works Okay, save this I will load the data now as you can see in the console Uh, okay, come on. All right. So we go edit You can see it is initially it's false I'm doing uh, something here update Okay, so you know that at this state is true But we already change it to be false already until the next render, right? So yet go back out You come back again You see that now has been already been set to false again Right before it was true all the way That's what we're able to see the data again and now we do more submissions, right? And then you do again Now false Gone come back in again. And so you can add you can edit other ones just like that Okay, so that is basically what you need to do for this assignment Right, so I'm going to turn this one off. You don't need to do that anymore And uh, I think that's about it for this one Uh, it seems to work beautifully Now the other one I want to do is the delete down here Okay, so we'll delete data data. It's very simple. We are going to basically Pass that down as well so the the delete I also have to delete all you can also implement that I have a deal or button But I'm going to do just the delete flight And unless I already have that form there, which I don't think I do do I have it? Uh, the bottom Yeah, I have a button down here called delete all And it is there. So we're going to implement that as well So do both of those the delete will be similar Very easy We just basically pass the id to us. We know which id you want to look Fine again, we have to match that id find the index and delete the record So let's go back here when I click the delete. I need to pass this down To the child component. So here You can pass it down delete flight Like also the delete all No, no, no, no one now. I'm sorry. I did it wrong. You don't have to because it's not in the edit flow It's not here. It's already. Um, I think we already set it to the Not mistaken You already set it to the Flight. Yeah, the flight here. So we had the the delete flight right and then I also yeah, I want to add it here. So the delete flight and the delete all So it'll be here And again, let me just Do this so it's easier to see So we'll add the delete All here Okay, so make sure you go to the flight not the edit one Okay So now the add the flight list which is this one over here Okay, we have everything here and we pass it down and here's the delete all the delete flight That would pass the id and then the delete all which is This button right here No, where is it at the bottom? Where'd I put it? Maybe it's in the Oh, yeah over here delete all. Okay. So we already pass it down to the props called delete all um, let's see The flight list here Table. Okay. So delete all. Yeah, we passed that already down to this button function So our click would be properly all We call that function and then it loads these two functions right down here So for the delete all is easier. We can do that first. Basically, we just say You know this set set state I'm going to set the flight data To empty just like that. Okay. That's basically it Very simple like that. You can also do a a slice if you want to do the slice one That's okay. That's fine too, but set the blank. That should be very simple Then the delete id is what do like we did before I did you didn't get the index. So again counts Const index is equal to this that state that flight That find index object That matches the id of the id And so make sure when you pass it in it has to be the the integer type Which I think we already handled that down in the class So they would got the id then again if index right Is not equal to a negative one I want to do a list that state um Actually, we're going to load the data first. Uh, yeah, let's load the data Let's turn the flight data It's equal to this that state That flight data and I want to do a flight data of the Splice at the index position and remove one record Okay, after that we go ahead and then call the assess state And then we'll just put here flight data is equal to flight data So we've then update that state Okay So that's how you remove one data at a time Simple, right? Okay, save and see if this works Let's go over here and refresh the page So we're going to delete the first record as you can see we removed the first one. Let's remove the fifth one and so forth we go remove all of them and Uh, that didn't work. Yeah, I forgot to um Why that didn't work Okay. Yeah. Oh, yeah, because I forgot to uh, um, let's try again Delete all That didn't seem to work. So the delete all mistype I knew something was not right Okay, I don't know what it should work Okay, so let's throw one more time And refresh and here we go and boom. All right So that's it So I hope this one helps you to um, you know build this edit flight in the delete buttons And uh, so I look forward to seeing what you have. Thank you