Access Nested Data with Reacts props.children
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.