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

by

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)

More Related Contents:

  1. mobx-react observer don’t fires when I set observable
  2. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  3. Uncaught TypeError: Cannot read property ‘state or props’ of undefined
  4. Dynamically import images from a directory using webpack
  5. PropTypes in a TypeScript React Application
  6. What does the error “JSX element type ‘…’ does not have any construct or call signatures” mean?
  7. Property ‘value’ does not exist on type ‘Readonly’
  8. Typescript image import
  9. Differences between creating a new class to using export const
  10. How to import and export components using React + ES6 + webpack?
  11. Set types on useState React Hook with TypeScript
  12. Updating React state when state is an array of objects
  13. Cannot use JSX unless the ‘–jsx’ flag is provided
  14. ReactJS with ES6: this.props is not a function when I communicate two components
  15. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  16. React: Which is recommended arrow or normal function?
  17. Default property value in React component using TypeScript
  18. What does the colon mean in Javascript after function?
  19. React Hooks – Modified state not reflecting immediately
  20. React Hooks – Modified state not reflecting immediately
  21. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  22. Difference between import React and import { Component } syntax [duplicate]
  23. How do I type this ‘as’ JSX attribute in TypeScript?
  24. How to define css variables in style attribute in React and TypeScript
  25. Disable ESLint that create-react-app provides
  26. Webpack & Typescript image import
  27. Only allow specific components as children in React and Typescript
  28. Put A Warning If Page Refresh in ReactJS
  29. import * as React from ‘react’; vs import React from ‘react’;
  30. ‘React’ was used before it was defined

Leave a Comment