Components of a higher order method to return the props.children of render?

I decided to write a small library.
Wrote a component that takes one child, forwarding him the props data and have to return descendant:
let props = this.props;
let child = Children.only(props.children);
return cloneElement(child, Object.assign({}, props, {data: "Data"}));


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


But gives 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`.


How best to implement such an approach?
June 26th 19 at 14:26
1 answer
June 26th 19 at 14:28
return (
<el>
)</el>


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

render() {
 return this.renderChildren(this.props);
 }
, off topic question, but:
1) as far As I know {} allows you to insert code.
Ie: to display an array of components, for example: [<span>,<span>]</span></span> - fit braces. But if one element, then the curly braces are not used, but you can directly?

2) If so, the brackets are required:
let El = <p>
return (</p><div>{El}</div>);


3) And if you need to return just the element, it is possible without them?
return El; - britney38 commented on June 26th 19 at 14:31
: Yes, only the array you can't return from the render() method in the current version of react. - rhett.Bayer commented on June 26th 19 at 14:34

Find more questions by tags React