ReactJS: Why use this.props.children?

Question

I\'ve realised that none of the components I write use {this.props.children}.

I tend to compose my components the way the official docs state at the top

Answer 1

Some components don't know their children ahead of time. This is especially common for components like Sidebar or Dialog that represent generic "boxes".

We recommend that such components use the special children prop to pass children elements directly into their output: Read More...

Answer 2

Children is a special prop that can be passed from the owners to the components defined inside their render method. It allows us to customize a structure of a component.

With props, a child component keeps its structure under the full control and only certain attributes or values are allowed to be passed. The structure of the component is hard coded.

In the React documentation, children property is described as opaque, because it is a property that does not tell anything about the value it contains. As a result it allows a client/parent to customize a structure.

We can also say, that the components defines only a kind of basic template/structure, for instance by providing a kind of "header". And the consumer reuses this header structure, by adding children.

Answer 3

In my applications I rarely use this.props.children, because I often know specifically what children I want to render. In libraries, or components written to be re-used outside of a specific component hierarchy, I've seen it often. I think this.props.children has more relevance to that use-case.

Edit: I thought I'd elaborate on some cases that this.props.children can come in handy. One such example is when creating components which follow the 'render prop' pattern. i.e. I've got some components that require pulling data in from multiple 'render prop' HoC's, such as an Apollo Query component as well as a state management HoC. I combined all my different data sources into one HoC and then called children as a function, passing in the result of pulling out all the data I needed. That being said these days I prefer and look forward to wider adoption of Hooks as an alternative to render props.

Really any component which you want to render arbitrary children; another example I've used props.children is when creating a HoC that required a user be authenticated before rendering the child, redirecting to a login screen when the user isn't logged in. I could wrap any of my 'protected' screen components with this auth HoC.

It's still something the majority of my components don't use, but just another tool to be applied when the situation warrants.

Answer 4

I'd say it would be useful when you don't know what you want to render.

For instance, you have a tooltip wrapper, let's say it's A component in your scenario, and you can use it to pass different content:

<A>
    <div>Some text...</div>
    <ImageComponent />  // render an image as well
</A>

Or:

<A>
    <div>Only text</div>
</A>