How to pass props to this.props.children with React?

To pass props to this.props.children with React, we call the React.cloneElement method.

For instance, we write

<div>
  {React.cloneElement(this.props.children[0], {
    loggedIn: true,
    testPropB: true,
  })}
  {React.cloneElement(this.props.children[1], {
    loggedIn: true,
    testPropA: false,
  })}
</div>;

to call cloneElement with the child element to render and an object with thge props that we want to pass into the child component.

We pass the loggedIn and testPropB props to the this.props.children[0] component.

And we pass the loggedIn and testPropA props to the this.props.children[1] component.