Component Composition

props.children

props.children (or this.props.children if you're using a class component) refers to whatever you put between the opening and closing tags of a component when it's invoked.

So say you have a component called If. Instead of rendering it with a self-closing tag like <If />, you could instead render it like this:

return (
  <If>
    // stuff in here
  <If />
);

The props.children of the If component would be any of the stuff between the tags.

The real magic of this is that you can pass anything in between the tags and access it as props.children in the component.

There's a real power in this. As the reading stated:

This de-couples the component from its content and makes it more reusable.