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

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.