Props Children

props.children in a component is just whatever is between the <Opening> and closing </Opening> blocks of a component.

<Welcome>Hello world!</Welcome>

Stateless Function Example

function Welcome(props) {
  return <p>{props.children}</p>;
}

For components defined as classes

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

This is particular handy when we have a component that has an element that might change, example

<Profile>
<LoggedIn></LoggedIn>
<Link>Logout</Link>
</Profile>

<Profile>
<LoggedOut></LoggedOut>
</Profile>

class Profile extends React.Component {
  render() {
    <p>Welcome {this.props.name}</p> // default prop will be "back"
    {this.props.children}
  }
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License