[React Fundamentals] Accessing Child Properties

When you're building your React components, you'll probably want to access child properties of the markup.

In Angular, it is transcludion:

<div>    
    <ng-transculde></ng-transclude>
</div>

 

In React, it is:

{this.props.children}

It means, use whatever pass in my component:

 

import React from 'react';

export default class App extends React.Component {
    render() {
        return (
            <Button>I <Heart /> React</Button>
        )
    }
}

class Button extends React.Component{
    render() {
        return (
            <button>{this.props.children}</button>
        )
    }
}

const Heart = () => <span>Love</span>;

So we pass <Heart /> into Button component, so in Button component, we use {this.user.props}