Props.children

Components render other components

A very common use is that components, except JSX can also render other compnents. That means that a component acts as a parent-component and inside renders other components and whatever these render.

During rendering phase, myHeading  has another component inside. That means that potentially this NavBefore component can be placed somewhere inside the MyHeading render function.

There is no designated place for that. It can be put either before, after or somewhere between. In order to specify that, we use the {this.props.children} inside the MyHeading render function, in order to specify where the NavBefore component should be rendered.