7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.1 Creating a Form to Add Guests

Now you need to allow users to provide input to your application. As with most web applications, this will be done using a form. Let's see how to handle this in the world of React.

4.1 Creating a Form to Add Guests

Now that we have the initial state of our application up and running, and we can see how to tie in to those lifecycle events and kinda get everything set up, it's time to start to augment our application a little bit more and maybe add in a form here that's going to allow our users to sign in. So let's go ahead and go back to our application. And really, what we'd like to do is create another component that we can slide right in here underneath the sign in tag, and look kinda similar to the guest list here, at least a custom component in a similar fashion. So let's go back over here to our component folder. We're gonna create a new folder, and this is going to be the AddGuestForm. Now once again, you can call this anything you want. But I'm gonna stick with something simple like that that is very easy to understand what it's going to do. So this is gonna be the AddGuestForm.js. Now within here, once again, we're going to import, React from React. And then once we have that, now we can go ahead and export our const AddGuestForm function. And we'll go ahead and set this equal to props because I'm sure we're gonna wind up wanting to send something in here at some point. And we'll go ahead and open it up and we'll create our return statement. Now really, what we wanna do here is we wanna create basically a simple form, and you can really put anything in here that you would like. And I'm gonna create kinda the bare bones here, and then we'll start to fill in the functionality as we go. So let's go ahead and start by creating a new form. And we'll fill in some of the other particulars as we go. And I'll show you how we'll handle that as far as React is concerned. But we're basically gonna wanna create a number of labels and inputs for all the different things that we wanna do. But we're gonna kinda try to pay attention to the styles that are created and provided for us when it comes to Bootstrap. So we'll kinda start to do that as we go along, so we'll say div., in this case, it's gonna be a form-group. And within here, we are going to create a label. And the label is gonna have an htmlFor, in this case it's name, because we're going to provide the name first and we'll give that a text of name. And then we'll come down here and we'll create an input that's gonna have a class of form-control and the type is going to be text. And we'll just leave it there for now. We'll make some more modifications as we go but that should be enough to get us started. So really, what we're gonna do now is we're gonna create a copy of all of this that's going to mimic the same functionality for all the other fields. So we'll just copy that. And we'll paste it down here. And actually, we'll also need to add in here, now that I'm thinking about it, we're gonna have to give this a name. And we'll set that name equal to name in this case, and then we'll come down here. And instead of this being for name, we're gonna make this one for street, and we'll also make the name here equal to street. So you can obviously make these anything that you would like. But we're just going to stick with the same form fields that we had, as we were setting all of these up. So this one will be city, city and finally city. Then we'll go ahead and copy this again. We'll come down. In this case, we're going to make state, so this one will be state, and then the last two are going to be the zip and the phone number. So you can obviously create different input fields for different types if you want. But I'm just gonna basically leave them all as strings, and you can add different types in there if you'd like. But this is gonna be simple for what we're trying to do, so phone, phone, and finally, phone, so we'll go ahead and save that. So now we have another component, our AddGuestForm, that we wanna display alongside of our guests that are already logged in or that have already signed in. So now we can take this exported AddGuestForm, we'll copy that, and we'll bring that over into our App.js. And we'll just go ahead and slide that in here as our new component and it's not gonna know what that is. We'll go ahead and add in, at the very top, an import statement. We'll say import AddGuestForm from components/AddGuestForm/AddGuestForm and save. And so once we do that, we should now see on the other side our nice little form. Now, we don't have a button in there. We'll add in the button, but as you can see, all the pieces are there. We'll be able to add in our name, street city, state, zip and phone number. And then what we'd like to happen is once the user has entered all that information, hit Submit, we'd like to see another guest show up on the right hand side. So let's go ahead and add in the button, To our AddGuestForm, so down here at the very bottom of our form, we'll just add in a button. And we'll give that a class of button and button primary, and we're gonna give this a type of submit. And we'll say Add New Guest, and save. So this should re-render over here. We get our button down here. I need to get rid of that useEffect fired, since I think we've already kind of shown how that works. I can get rid of that and hit Save. And so this is gonna re-render now and everything's gonna look pretty nice. And I'll be able to start filling in all of this information as we go. So everything's starting to look pretty nice. Now in the next lesson, I wanna start to talk about some of the other things that we're gonna wanna do with this AddGuestForm like handle some form submits and handle button clicks and all those types of things. But right now, we're able to kinda bring this form to life and really get it onto our screen. Now it's time to give it some functionality.

Back to the top