FREELessons: 19Length: 1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.6 State Transitions and Conditional Rendering

Now that you have your two main forms, it’s time to learn how to render one at a time using a couple of nifty tricks known as state transitions and conditional rendering.

4.6 State Transitions and Conditional Rendering

Now it's time for us to handle the app component side of the equation when we want to edit a selected guest. So the way we're gonna do this is we're going to add in a couple additional pieces of state that we can manage in our component. And that's interesting to know too that just because we have already used the uState hook once already in this component it doesn't mean we can't use it again. We can use the uState function or hook as many times as we need to. So let's go ahead and start to create some of these additional pieces of functionality as well as state that we're gonna monitor within this component. So we have this concept of our guests and our collection of guests. But now I wanna be able to handle the state of our application, whether I'm editing it or not. So we're going to create a nother piece of state here that's going to be editing and set editing. And what this is going to allow us to do is determine what state we are in for this component whether we are in an editing state or not. So by default, we're gonna give this a false so we don't wanna have this be editing by default we're going to have it be just kind of a normal mode. And now that we have that piece of state, we can select another one, in this case we're going to have a current guest. So the current guest is going to be the guest that I have clicked on the Edit button next to in my guest list, so that I can start to let the app component know that I want to edit that particular guest. And I gave you a little bit of a hint there, we're also gonna have to travel over to our guest list component to be able to trigger some of this work as well, but we'll get there. So I'm going to set this equal to useState, and the current guest at this point is going to be kind of the shape of this, and it's actually gonna be very similar to. What we did before, when we are doing our ad guests, we're gonna kinda have this concept of an initial form state. So we'll go ahead and copy that, and we'll bring that over here as well so we can just use that a little bit at this point as well. So we can useState and will say that this is going to be our initial form state, so that's gonna be good to go. And then from here what we're gonna wanna do is add in a couple of methods that we can pass into our components. So that we can work with them or work with the functionality inside of our child components just like we've done before. So lets come done here pass delete guest and lets add a couple of functions. The first one here is going to be editGuest, and what editGuest is going to do is it's actually going to take in this guests that we have clicked on, it's going to set the current state of our application to true. And then it's going to take that guest information and it's going to pass it to the current guests. So it's gonna assign it to the current guests using this SetCurrentGuest function. So let's go ahead and do that now, so the input here is gonna be a guest. And then within here I can say set editing, and I wanna set editing equal to true. So that's gonna transition this into a different form of our application. Will help us transition between the addGuest form and the editGuest form. And then from here I can say set currentGuest, and from here I wanna basically create an instance of a guest object, the current guest object based on the information that is in the guests that was passed into this function. So I'm simply going to create one that has the same structure here as our regular objects. So I'll say the ID is gonna be guest.id the name is gonna be guest.name, the street is going to be guest.street. The city is going to be guest.city, the state will be guest.state, zip will be guest.zip. And finally, as you might have guessed it, the phone will be guest.phone. So that's gonna create this new instance of a guest object and it's going to set it to the current guests that we are kind of editing at this particular point in time. So that's gonna kinda take care of that portion, the next part that we wanna be able to handle is actually handling the updating of a guest. So we'll say const updateGuest and we're gonna set that equal to, we need two parameters here, we're gonna need the id. So it'll be id of the one that I'm editing as well as this updatedGuest object that we're passing in so that I can actually update the current instance of a guest within my list that has this id with the information here from the updatedGuest. So the first thing that I wanna do at this point is I'm actually going to turn editing off here, so I'm gonna say, set editing is going to be false. And then I can say, set guests and then, you can handle the updating here many different ways. I'm simply going to replace the object within my guests list that has this ID with updatedGuests, but you can update the individual properties or handle this however you want. I'm just gonna do a wholesale update, so we'll say, setGuests, and we'll do guests.map. And then we're going to map each guest, and in this case, we're going to say, if the guests.id is equal to the id that we passed in, the we'll simply replace it with updated guests. And if not, we're just going to leave it as that initial guests or as its current state, and I think that should do just fine as well. So now, we have a couple different functions here that we can use it have a spelling error here. So now we have a couple different functions that we can use, we have some different state objects that we can use. Now I wanna be able to actually conditionally render the different forms based on what state we're currently in. So we're actually going to come down in here to our return function, and we're basically going to change and conditionally render this area right here. So right now,we're assuming that we're always adding a guest, but that's not always going to be the case. So really what I wanna do here is I want to begin by wrapping all of this in a div. So let's start by doing this and we'll go ahead and take this information and the div here is strictly for containing this block or these elements right here. Because when you are returning any JSX elements or an attributes bundled together. You can only have one root element, and as you can see in all these components, they've always got something outside, like a div. And the same goes for actually returning conditional renderings here, in that I need to be able to return everything in one block. So in this case, I'm gonna be using this wrapping div, so that's what we're gonna be using if we're not in that editing state. So the way that we do some conditional rendering in here is just like we've done any other code execution anywhere else, is we will use the curly brackets so I can now execute code in here. So in this case I can say editing, because I'm going to check the current state of the editing variable here. So which means if we are in an editing state, then I want to provide some JSX using my curly brackets or using my parentheses. So if I am in an editing state, then I am simply going to create a div open and close. And then within there, I'm going to have an h2, just like I have down here, but instead of saying sign in, I'm gonna say Edit Guest. And then underneath there, I'm going to have just like I have the AddGuestForm here, I'm going to add in my EditGuestForm. Now I have to be able to pass some things in here as well so am gonna pass in, editing. So I find editing kind of an editing flight here that I wanna be able to pass in editing so I know which state I'm currently in. Then I'm going to pass in my set editing function so that I know how to get out of there if I hit that cancel button. So set editing is going to be equal to my set editing function. Then also, I need to be able to pass in that current guest, so I'm gonna set current guest equal to my current guest object that I have here. And then finally, my update guest is going to be equal to myupdateGuest function. So I have a lot of information, that I can pass into there, and then I'm gonna close out that element. Now I'm gonna to come back here, and I can now finish this conditional statement. So if we're editing, I want to display this information, but if I'm not editing, then let's go ahead and do the false side of this equation. And then within there, I'm simply going to take this block right here and go ahead and paste this in. And we'll just kind of clean this up just a little bit, like that, and we'll go ahead and save this. So now as you can see, how we can do this conditional rendering, it's actually very similar, whether you're doing hooks or functional style React, programming or if you're using class base. It's really basically the same way, so this may look somewhat familiar if you watched my previous course, so now we're able to flip flop back and forth. So now if I save all of this information, you're gonna see over here that we're running again, and that's great, but we're still not able to do anything, we still see the add new guests. And I hit Edit here and nothing's happening, and all my functionality is still there. But the problem is I'm not able to flip flop back and forth between states. So the next thing that we have to do, is we have to enable this edit button to actually put us into that editing state, and that's what we're gonna look at in the next lesson.

Back to the top