Higher order components way to return props.children from render?

Question

React

Decided to write a small library.
I wrote a component that takes one child, forwards data to it in props and must return this child:

let props = this.props;
let child = Children.only(props.children);
return cloneElement(child, Object.assign({}, props, {data: "Данные"}));

render:

render() {
    let El = this.renderChildren(this.props);
    return (
      <El />
    );
  }

But it throws an error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `MyComponent`.

What is the best way to implement such an approach?

Answer 1

return (
   <El />
)

This is true if El is a component. And you have El - this is a react element (component instance). So just return it:

render() {
    return this.renderChildren(this.props);
  }