How to clone multiple children with React.cloneElement?

Question

I try to clone React elements like this, to pass the parent props to them (the props are not assigned in this example):

React.createElement('div',
    {
        style: this.props.style
    },
    React.cloneElement(this.props.children, null)
)

This however returns following error:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

If there is only one child or if I pass React.cloneElement(this.props.children[0], null), there is no error and the desired element is rendered.

How can I clone multiple elements?

Answer 1

children props is an opaque structure, it can be undefined, an array, or a single react element. You should use the React.Children utilities to map over the children structure :

const style = this.props.style
React.createElement('div',
    { style },
    React.Children.map(this.props.children, (child => React.cloneElement(child, { style })))
)