This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Component Children" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Often times in an application, there are user interface elements or other layout-specific times that are shared between components or routes. The props.children property can be used to indicate where child components should be placed. This allows the parent component to have container elements reused for multiple child components.

Get Unlimited Access Now

Transcript from the "Component Children" Lesson

>> [MUSIC]

>> Brian Holt: Notice that we don't have this nice pretty background on our route here, but if we go back to this one, it has a nice background, right? It would be really nice if we could share those background between the two without having to basically have to hard coded into every single route, right?

[00:00:21] It would be nice if we could have some sort of shared layout between the two. Now, it's really just an encircling div so that in our case right now, it's not very compelling. I'd rather just hard code the div than to introduce the complexity. But you could maybe see where this could be useful in the future.

[00:00:37] If you had a nav that was shared between all of your different routes and you wouldn't want to have include that literally every single time that you wanted to use it. It would be nice if it was on every page so that you could just make one wrapping route that then encircles the lower routes, right?

[00:00:52] That's the basic idea of what we're gonna do here. So let's go ahead and do that. So let's create a new file in here called Layout.jsx.
>> Brian Holt: You're gonna put it into the JS folder.
>> Brian Holt: You're gonna pull in react
>> Brian Holt: And this is gonna be a really simple component.

>> Brian Holt: const Layout = (props) not porps.
>> Brian Holt: Gets me div className =app-container.
>> Brian Holt: Okay? Now we have to be able to tell our component where to stick the inner stuff, right? Because we could have a bunch of stuff up here like, we could have, you can ignore, this is just an example but like.

[00:01:59] My branding right here, like you can have a bunch of stuff in here, right? You want to be able to have that flexibility, so here we're gonna say props.children and children it's actually a special kind of prop. In other words never name a custom property that you're passing down children because that's reserved for this one particular thing.

[00:02:17] As far as I know that's the only reserved one, no, there's context, don't use context either. Well, no, you can use context. It might be a little strange but don't use it anyway. There's no problem necessarily with it, anyway don't use children. That's where they wanna get at.

[00:02:34] So props.children, okay. You can get rid of that h1 right there because we don't want it. Okay, and then do module.exports = Layout, okay? Pretty simple, only nine lines of code, two of which are blank.
>> Brian Holt: So let's go actually see how one uses children. Actually, I'll just demonstrate to you, just kind of off to the side here.

[00:03:03] So MyCustomComponent,
>> Brian Holt: This is not a div, right? But if I put stuff inside of here, right?
>> Brian Holt: Right, I can now access whatever is between my test component as children, right? So whatever you put inside of it, that's the children, right? So anything that goes in there is that.

[00:03:34] We're are also gonna need prop types in here, it's gonna yell at us, just FYI. Might not be yelling at, in fact I'm not running it. So let me start running it.
>> Brian Holt: Okay.
>> Brian Holt: Nope, wrong one.
>> Brian Holt: Am I in the wrong one? That's why, it is running.

[00:03:59] Okay, nevermind.
>> Brian Holt: Okay, so any questions about, necessarily what children does? It's just, it allows you to get at those past in components. And here we're gonna say const Element, I think is what it is. Let me double check my prop types here on the, react prop types.

>> Brian Holt: I believe it's element. Yeah, element is what we're looking here for. So, a react element, that's what we're looking for. Right, a react element right there. So, I want to say { element } = React.PropTypes.
>> Brian Holt: And then we're gonna say, Layout.PropTypes. And again make sure this is a capital P, this is a lowercase P..

[00:05:03] I mean it makes sense in terms of this is an instance of it, these are the classes, right? I get that, it's just annoying, it's whatever. Unfortunately, you people have to listen to me complain about react. Children equals element, right?
>> Speaker 2: Is required.
>> Brian Holt: You can make it required if you want to.

[00:05:30] I mean, could you conceivably ever have your layout without the children. Probably not, but that one works for you. And the other thing is, if you don't see in each other and you're gonna know really quick that it's not working. So, either way.