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 Intro to React v4 course:
The "this.props.children" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

All components have a special property "children" which is all of the components immediately inside of a parent component.

Get Unlimited Access Now

Transcript from the "this.props.children" Lesson

[00:00:00]
>> Brian Holt: Let's talk a little bit about this.props.children. For the most part, on props, there's nothing really reserved keyword, you can just pass anything in. There's two exceptions to this, as far as I know there might be more, but there's definitely at least two. Key, right, key, which we use for when we're doing maps that do with components to make sure that they don't do it for you.

[00:00:24] Or reorder them that there can be that performance optimization that we talked about previously, right? The other one is children, so if I look at let's say, go back to app.js just for a second, inside of Router, notice that Router opens and closes, right? So anything that goes inside of Router, Router can refer to as this.props.children.

[00:00:47] So it's whatever children components are being passed to it. So in this case, we're passing results, details, and search params. Notice that these don't have any children, they're self closing tags. So that's what children is, children is whatever things were pasded to. So if we go back to modal we're just rendering out whatever children are put inside of it.

[00:01:10] Cool, so that's what modal is, it's this ability to render into this modal route that we grabbed up here.