Every component’s props object has a property named children.
props.children will return everything in between a component’s opening and
closing JSX tags.
All of the components that we’ve seen have been self-closing tags,
such as <MyComponentClass />. They don’t have to be!
You could write <MyComponentClass></MyComponentClass>, and it would still work.
props.children would return everything in between <MyComponentClass> and
</MyComponentClass>.
Examples:
<BigButton>
I am a child of BigButton.
</BigButton>
<BigButton>
<LilButton />
</BigButton>
<BigButton />
In Example 1, <BigButton>‘s props.children would equal the text,
“I am a child of BigButton.”
In Example 2, <BigButton>‘s props.children would equal a <LilButton /> component.
In Example 3, <BigButton>‘s props.children would equal undefined.
If a component has more than one child between its JSX tags,
then props.children will return those children in an array.
However, if a component has only one child, then props.children
will return the single child, not wrapped in an array.
React provides a helpful API for working with a component’s
children through React.Children. Some of the helpful functionality
it provides are as follows:
You can turn the data structure returned by props.children into a
flat array with keys assigned to each child,
using React.Children.toArray().
This is one of the common methods to be able to access
each individual child of the component.
You can also map a function on each individual child using
React.Children.forEach().
And, you can also get the number of children of the component
using React.Children.count().
In addition to these, there are a few other useful methods
provided by React.Children, which you can check out in
the official documentation.