What does the error “JSX element type ‘…’ does not have any construct or call signatures” mean?

by

This is a confusion between constructors and instances.

Remember that when you write a component in React:

class Greeter extends React.Component<any, any> {
    render() {
        return <div>Hello, {this.props.whoToGreet}</div>;
    }
}

You use it this way:

return <Greeter whoToGreet="world" />;

You don’t use it this way:

let Greet = new Greeter();
return <Greet whoToGreet="world" />;

In the first example, we’re passing around Greeter, the constructor function for our component. That’s the correct usage. In the second example, we’re passing around an instance of Greeter. That’s incorrect, and will fail at runtime with an error like “Object is not a function”.

The problem with this code

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

is that it’s expecting an instance of React.Component. What you want is a function that takes a constructor for React.Component:

function renderGreeting(Elem: new() => React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

or similarly:

function renderGreeting(Elem: typeof React.Component) {
    return <span>Hello, <Elem />!</span>;
}

More Related Contents:

  1. PropTypes in a TypeScript React Application
  2. How to use refs in React with Typescript
  3. Typescript input onchange event.target.value
  4. Property ‘value’ does not exist on type ‘Readonly’
  5. How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
  6. Typescript image import
  7. mobx-react observer don’t fires when I set observable
  8. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  9. Set types on useState React Hook with TypeScript
  10. Cannot use JSX unless the ‘–jsx’ flag is provided
  11. Importing images in TypeScript React – “Cannot find module”
  12. Default property value in React component using TypeScript
  13. How to type a page component with props in Next.js?
  14. What does the colon mean in Javascript after function?
  15. React Hooks – Modified state not reflecting immediately
  16. React Hooks – Modified state not reflecting immediately
  17. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  18. React with Typescript — Generics while using React.forwardRef
  19. Is it possible to limit children to specific components using React with TypeScript?
  20. is it possible to React.useState(() => {}) in React?
  21. How do I type this ‘as’ JSX attribute in TypeScript?
  22. Typescript React: Access component property types
  23. How to define css variables in style attribute in React and TypeScript
  24. How to assign the correct typing to React.cloneElement when giving properties to children?
  25. Disable ESLint that create-react-app provides
  26. React and TypeScript—which types for an Axios response?
  27. Webpack & Typescript image import
  28. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  29. Only allow specific components as children in React and Typescript
  30. ‘React’ was used before it was defined

Leave a Comment