⚠️ This lesson is retired and might contain outdated information.

Access Nested Data with Reacts props.children

Joe Maddalone
InstructorJoe Maddalone
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 2 years ago

When you're building your React components, you'll probably want to access child properties of the markup. this.props.children accesses the innerHTML or nested components of another component.

[00:00] In order to access nested values or components in a component, we can use props.children. To illustrate this, I'm going to have my app component return a new component called "button," and inside of the opening and closing tags for that component, I'm going to type the word react.

[00:17] That's the value we're trying to get at, react. We're going to create our stateless function component called button, it's going to take in props and simply going to return an actual HTML button. To get at that value of react, which is nested in between our opening and closing tags, we're going to use props.children.

[00:37] We're going to save that and there in the browser, we can see that we've created an HTML button, and we've allowed that in our HTML, or text content of react to pass through.

[00:49] I also said we could access nested components, this time around, I'm going to create a class component, for no other reason other than to illustrate it a little bit differently.

[00:58] I'm going to call this one my heart component. It's going to return a span, and right here inside of that span, I'm going to drop the HTML entity for a heart symbol.

[01:10] We're going to jump up here, back to our app component, and inside of the opening and closing button tags, I'm going to say I, we're going to drop in our nested component, which is going to be our heart component.

[01:21] We're going to save that, and we can see that using props.children allowed both the text values, as well as the nested component to flow on through into our HTML button.

Ryan
Ryan
~ 9 years ago

HI I was having trouble using the React.renderComponent( ) method from the example, and it looks like the React team has changed the method that you should use in this case from React.renderComponent() to React.render()......https://medium.com/@_jh3y/adopting-change-with-react-v0-12-1d9625e27535

Leonard
Leonard
~ 9 years ago

I ran into the same issue Ryan and needed to swap out the script files: http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.min.js

https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js

Ryan
Ryan
~ 9 years ago

Hey how did you use the emmet like syntax when typing the span.glyphicon... and have webstorm know to use className instead of class (JSX vs HTML) ?

Ryan
Ryan
~ 9 years ago

Hey how did you use the emmet like syntax when typing the span.glyphicon... and have webstorm know to use className instead of class (JSX vs HTML) ?

Kevin
Kevin
~ 8 years ago

How do I setup bootstrap in my app? The video didn't show this...

Joe Maddalone
Joe Maddaloneinstructor
~ 8 years ago

Just add <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> to your index.html.

Somsubhra  Ghosh
Somsubhra Ghosh
~ 8 years ago

Really Nice Video..Have been enjoying the series

Also found that the Button could be created in a functional(presentational) way

const Button = (props) => <button>{props.children}</button>
Olga
Olga
~ 8 years ago

I'm still having trouble understanding this.props.children. When adding {this.props.children} to the child component, why doesn't it render a second button with the parent's information ?So in total there would be two buttons. I know my logic is wrong, but can someone tell me why this isn't the case ?

Kirk Sefchik
Kirk Sefchik
~ 8 years ago

I'm still having trouble understanding this.props.children. When adding {this.props.children} to the child component, why doesn't it render a second button with the parent's information ?So in total there would be two buttons. I know my logic is wrong, but can someone tell me why this isn't the case ?

I think I understand where you're coming from. The nomenclature here is very confusing -- it tripped me up as well. this in the Button class is indeed referring to Button (not <button> directly, but by extension). Whenever you pass something into the inner HTML of a component, it's populated in [child].props.children. If you install React Dev Tools for your browser (or console.dir(this) inside Button.render() { ... } ...), you can see that Button.children is an array composed of 3 "children" passed to it by the App component: "I ", <Heart/> and " React". I know, silly right? They need to come up with a better name for this -- I don't know why they couldn't just call it [child].props.innerHTML. Regardless, I think that answers your question. :D

Eleonora Lester
Eleonora Lester
~ 6 years ago

It would be really cool to have more real-life examples of these vids. Thanks!

Zone Chen
Zone Chen
~ 5 years ago

I have the same Question with Olga.Thanks for Kirk;s answer.

I thought using props.children is to produce nest component structure with JSX.

// use props.children >> can setup structure in JSX
const HeartButton = (props) => <button>{props.children}</button>
const HeartImg = ()=><span>&hearts;</span>

<HeartButton>
   <HeartImg/>
</HeartButton>

<HeartButton>
   <HeartImg/>
   <HeartImg/>
</HeartButton>

// no need to modify component code

//without props.children >> need to setup the structure in code
const HeartImg = ()=><span>&hearts;</span>
const HeartButton = (props) => <button><HeartImg /></button>

<HeartButton />
// need to edit component to get more heart, or need to produce another component: OneHeartButton, TwoHeartButton ...

don't know that whether my understanding is right ?

Markdown supported.
Become a member to join the discussionEnroll Today