How to assign the correct typing to React.cloneElement when giving properties to children?
The problem is that the definition for ReactChild is this:
type ReactText = string | number;type ReactChild = ReactElement<any> | ReactText;If you're sure that child is always a ReactElement then cast it:
return React.cloneElement(child as React.ReactElement<any>, { width: this.props.width, height: this.props.height});Otherwise use the isValidElement type guard:
if (React.isValidElement(child)) { return React.cloneElement(child, { width: this.props.width, height: this.props.height });}(I haven't used it before, but according to the definition file it's there)
This solved it for me:
React.Children.map<ReactNode, ReactNode>(children, child => { if(React.isValidElement(child)) { return React.cloneElement(child, props ) } }quite simplle solution