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

2.3 Passing Data to a Child Component

A very common pattern you will see in React applications is maintaining data in a centralized location and then passing it around to different components that need it. In this lesson, we will begin to define what our guest data looks like and start to store it in the main App component and pass it down into our newly created GuestList component.

2.3 Passing Data to a Child Component

Let's start to define what some of the data is going to look like within our applications, when it comes to the guests that are signing our guestbook. So really, what I wanna be able to do now is, I want to take that GuestList component that I've created. That there's really nothing in right now, and we're saying No Guests, is I wanna display some guest information. But I really don't have a way of getting that yet, so how am I gonna handle that? Well, there's several different ways that you can do that, so I'm gonna start by cheating a little bit. And I'm just gonna define kind of a constant list here of guests, and what those guest objects look like. And then I'm gonna show you how to pass them from a parent to a child component. This is gonna be very simple, or actually, very similar to what we've done in the past. But we're going to introduce a new concept off of this, coming up very shortly. So within my app component, I want to jump down a couple of lines here, give myself a little bit of space. And I'm gonna drop in a little bit of code here, nothing too crazy. This is simply a constant object, and it's called guestData. It is an array, or a list, and all it contains right now is a single object, and that object has several properties. We have an id, we have a name so I just defined Derek Jensen. We have a street, 123 Main Street, we have a city, Chicago, a state, Illinois, a ZIP code, 12345, and a phone number, 555-555-1234. So you can define any sort of data that you want in here. You can change it to be anything that you would like. But really, this gives us some data to start with. So now, in the root of my application, at the highest level in my app component, I have some data. Now I wanna get that data down into my GuestList, then how do I do that? Well, if you remember from before in my previous course. We talked about passing data from parent components to child components using properties. And that's exactly what we're gonna do this time, so this takes two changes. We're gonna have to go into our GuestList, and now we're gonna have to modify the definition of this, just a little bit. And now we're gonna say that this GuestList is going to take in props, or properties. Which is really going to map to the attributes that are assigned to this component within our App.js. So let's see what we're gonna do with that, so there's a couple of different things that we can do here. So I'm gonna use this No Guests, because No Guests is a valid scenario, where I might not have any guests to display. And I don't just want blank, cuz then it maybe looks like my application isn't working. So maybe I should leave that there, which is fine. But what we're gonna do here is, we're actually going to do a little bit of conditional code that's going to allow us to handle both the scenario where there are guests, and where there aren't guests. So let's go ahead and jump into our body here, and start to make a little bit of a change. So what I wanna do now is, I want to go into my properties. And I wanna check to see, and actually, in order to write code within your JSX, you have to wrap it in these curly brackets. So let's go ahead and do that, so I can actually write code in here now. So I can say props.guests, which is going to be the property that we're gonna refer to these guests as. And you'll see where that's gonna come up, in just a minute. We'll say .length, and we'll say, if that length is greater than 0, then I want to render some JSX. And that's what we're going to, remember, we always have to wrap that JSX in these parentheses. And then if there aren't any, meaning, if the guests array length is equal to 0. And that's actually going to need to start with a question mark. Then if there are none, then we're going to render to something else. So we're doing a little bit of conditional markup here, and now we need to fill these in. Well, we already know what we wanna do if there's nothing there. If there's nothing in that list, we're simply going to display that there's no guests. But if there is something, if there are some guests in our list, then we wanna go ahead and display that information. So we're gonna say props.guests, and we're gonna use our map function. And we're going to say that for each of the guests objects in there, we want to then display some information. And what do we wanna display? Well, we've already said that we've got a number of different fields, or number of different properties in there. We've got things like name and address, city, state, ZIP, phone number, and all those types of things. So we want to be able to display all of that, and each one of those is gonna go in its own row. So we're gonna say we have a table row, and now, if you recall from our previous course on this. When you are iterating over and creating multiple instances of any sort of element within your JSX, you need to provide it a key. So we're gonna say, our key is gonna be equal to, and within here, then we can refer to that individual guest. And we can say, it's not key, but it's id, so that'll be it's unique identifier. So then for each of these table rows, we can put some of this information. And now, I'm gonna start simple here, and then we're gonna refactor this a little bit. But let's just display some information here, just so you can kinda see how things are going to start. So as you can see up here, we are defining two columns, an Address and Options. So first, I'm simply gonna create that first value to fall under address. And we'll just give it the name for now, so we'll say guest.name. And like I said, we'll refactor this a little bit later, and then we'll add in some additional information. And then we also have our Options, so the things that I wanna be able to do with it. So let's just go ahead and fill that in now, and then we'll give it some functionality in a little bit. So the first thing that I wanna do is, I want to create some buttons. So I'm gonna create a button, and I'm gonna give it a type of button. And this is just some other Bootstrap stuff that we can put in here. We'll give it a className, and we'll give the className, it's a btn. And we'll call it maybe btn, we'll give this a btn-warning, cuz this will be our delete, maybe. Or maybe this will be our edit, so we'll give it a warning, so that's kind of an edit. And then we're also gonna give it a little bit of spacing, so that we don't bump up against the button that's gonna be next to it. And then in here, we'll simply say Edit, and then we will drop down another line here. And actually, I'll close this out, so you can see a little bit better. And then here, we'll say we're gonna create another button. Once again, this is gonna be a type of button. Give it a className equal to, once again, btn. And we'll say btn-danger, cuz this is going to be if you want to, then delete this one. So let's go ahead and save that. So now as you can see, in our App.js, we've created this guestData. In our GuestList, you can see, we were handling some properties being passed in. And after we've saved all these changes, if we come back over to our application, you're gonna see that we have some problems. Mainly, we have a TypeError right now, cannot read property 'length' of undefined. Well, really, the problem here is we're referring to this props.guests.length. But that doesn't exist anywhere yet, so how do we fix that? Well, the way that we fix that is, we need to actually take that guestData that we defined within our app, and pass it into GuestList so that it actually exists, and then we can use it. So then we go into our App.js file, where we have this GuestList element, and let's add to it our guests attribute. And then within here, we can then say that guests is gonna be equal to guestData, just like that. So let's go ahead and save that. Now, if we come back over to our application, you're gonna see that we cannot read 'map' of undefined. It's because I have a little bit of a spelling error there. So as you can see, this kind of automatic reload of our application really kinda comes in handy. Because you're able to see a lot of these issues that you might not see, fairly quickly. So if we come back over to our application, we can see in here that we have guests, not guest. And that we're referring to guest as the individual items within there. So we'll go ahead and save that, we'll come back over, we'll re-render. And as you can see now, we're starting to get this concept of the guests that are signed in. But once again, we're only seeing the name here. We could deal with kind of adding to that a little bit, and we need some additional information. So in the next lesson, we're gonna refactor this a little bit, fill out some of that information. And really start to show what each guest in the GuestList is going to look like.

Back to the top