- Overview
- Transcript
2.4 Creating a Guest Component
You may begin to wonder at what point you should create components to manage the structure of the UI as well as data. One of the best times to create a new component is when you will need to repeat the same UI pieces over and over. In this case, we will start to repeat the display of guest objects in our GuestList. So let's go ahead and create a Guest component to handle rendering each guest object for us.
1.Getting Started
1.1Introduction01:01
1.2Prerequisites03:06
1.3Creating a React App08:22
1.4Adding Bootstrap03:35
2.Creating the Guestbook Components
2.1Basic App Component Structure07:19
2.2Create a Guest List Component04:53
2.3Passing Data to a Child Component08:58
2.4Creating a Guest Component05:03
3.Using Hooks in Functional Components
3.1Introducing the `useState` Hook05:28
3.2Lifecycle Events With the `useEffect` Hook07:00
4.Creating and Editing Guests
4.1Creating a Form to Add Guests06:07
4.2Handling Input Change Events08:15
4.3Handling Form Submissions09:39
4.4Deleting a Guest03:39
4.5Create a Form to Edit Guests06:34
4.6State Transitions and Conditional Rendering09:58
4.7Editing a Guest04:20
4.8Introducing the `useRef` Hook04:00
5.Conclusion
5.1Conclusion01:40
2.4 Creating a Guest Component
Now let's spend a few moments going through the actual guests on our guest list and kind of move some of that functionality off to its own component. So the first thing that I wanna do, is I wanna create a new folder under my components and we're gonna call this Guest. And this is where we will store our guest component, that is going to contain all of the functionality to basically just display what a guest looks like within our guest book. So as before, we're going to import React from react. And then we'll go ahead and export const Guests equal to, and we're gonna be passing properties into this once again, just like we did before. And then we'll go ahead and return our JSX. Now within here, we're just gonna keep things fairly simplistic, and we're going to display in individual guests and all the different pieces of that object. So let's go ahead and put this in an address tag. And within here, we are going to, first we'll display the name. And let's just make it stand out a little bit. So we'll go ahead and make this a strong, and will say props.guest.name. So that will be the first thing that we display. Then underneath that, we'll just put the address information as well as the phone number. So then after the strong, why don't we just put a little bit of a break here. And then we'll display props.guest.street and put another break. And then underneath the street, we'll put the city, the state, and the zips. We'll say props.guests.city, and we'll put in a comma, props.guest.state and then we'll put in a props.guest.zip. And then we'll go ahead and we'll throw another break in here like this, drop down to another line and then we'll display the phone number. So we'll say props.guest.phone, just like that. So, nothing too crazy, we're just gonna put some of this information in there in bold, the guest's name. But now we need to be able to utilize this guest and pass in a property that's gonna represent the guest. So we're going to come back to our guest list. And now in here instead of trying to do all of these things in here and display all this information, inside of here instead of doing our guest.name, we'll just go ahead and use our guest component, and we'll go ahead and import that. It imported it for me directly. And then, remember we have to pass in the actual guest, as a property. So we'll say, guest equal to guest, and we'll just pass that in, like that. So let's go ahead and save this. And now if we were to go back to our actual application, you'll now see that we have a list of our guests here and we are now seeing this information. We can now see the name, address information as well as the phone number, which is nice. But what's gonna happen now is you're gonna see as we start to add more, these option buttons are kind of up towards the top by default. So one thing we might wanna do is we might wanna drop those down a little bit, so it kind of centers vertically within this row. So let's go ahead and pop back over to our code really quick, and all we'll really have to do for that is go over here to this td and we will add in a class name and we'll set that equal to align, middle, go ahead and save. Pop back over and as you see it pops down a little bit. So now we have a nice little way to display the guests that are in our guestbook. Eventually we'll get around to the Edit and to the Delete, but now you can at least see those buttons. But we don't have a way of entering anybody in. So the next thing that we're gonna start to work on is the process of getting people in. But I also want to take a quick break before we do that, to discuss with you one of the more important features of React hooks. And that's been able to tie into life cycle events because as you can see, we're just kind of defaulting to having some information in there. So if we were to head back to our app, you'll see that we're just creating some data here and we're just pumping it through there. But typically, we're not going to hard-code these values into our application. We wanna be making some sort of calls to either a web service or to a database or something like that, to get this information. And we're not gonna get it right away. So we wanna be able to, when the component was loading, we could go ahead and make calls and get that information and then load it dynamically. So in the next lesson, I'm gonna show you one of the cool features that you can use as part of React hooks to tie into those life cycle events and then retrieve data when you need to.
