The usual way of using children:
jsx
<Header>
<ChildComponent truthy />
</Header>is a syntax sugar for:
jsx
<Header children={[<ChildComponent truthy />]} />We can see that this syntax is similar to how the render-props are used.
We can use the children prop to avoid prop-drilling (in the example above we add props to the child component and don't have to pull truthy prop in the <Header /> component implementation.
We can use React.Children.count(children) helper to make sure how much children have been passed to the component.
React.Children.map(children) handles mapping of children independently of the number of the child components.