How to assign the correct typing to React.cloneElement when giving properties to children?

Question

I am using React and Typescript. I have a react component that acts as a wrapper, and I wish to copy its properties to its children. I am following React\'s guide to using c

Answer 1

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)