What does the error JSX element type does not have any construct or call signatures mean

Question

I wrote some code   function renderGreeting Elem  React Component lt any  any gt         return  lt span gt Hello   lt Elem   gt   lt  span gt       I m getting an error      JSX element type Elem does not have any construct or call signatures   What does it mean

User · Answer

In my case  I was using React ReactNode as a type for a functional component instead of React FC type   In this component to be exact    x000D   x000D  export const PropertiesList  React FC    props  any    gt    x000D    const list string       x000D        Consequat Phasellus sollicitudin    x000D        Consequat Phasellus sollicitudin    x000D            x000D      x000D   x000D    return   x000D       lt List x000D        header   lt ListHeader heading  Properties List    gt   x000D        dataSource  list  x000D          renderItem   listItem  index    gt  x000D             lt List Item key  index  gt   listItem    lt  List Item gt  x000D          x000D        gt  x000D      x000D    x000D   x000D   x000D

User · Answer

The following worked for me  https   github com microsoft TypeScript issues 28631 issuecomment-472606019 I fix it by doing something like this   const Component    isFoo   FooComponent   BarComponent  as React ElementType

User · Answer

When I m converting from JSX to TSX and we keep some libraries as js jsx and convert others to ts tsx I almost always forget to change the js jsx import statements in the TSX TS files from   import   as ComponentName from  ComponentName    to   import ComponentName from  ComponentName    If calling an old JSX  React createClass  style component from TSX  then use   var ComponentName   require  ComponentName

User · Answer

I solved it by making use of Type Assertions before exporting the component  TypeScript wasn t able to identify after composing it using redux  compose  therefore I divided props types into IParentProps and IProps and use IParentProps while doing Type Assertions import   compose   from  react-redux  import HOC1 from  HOCs HOC1  import HOC2 from  HOCs HOC2   type IParentProps      type IProps       const Component  React FC lt IProps  amp  IParentProps gt    React memo  props    gt           return  lt SomeComponent     props   gt       return compose HOC1 HOC2  Component  as React FunctionComponent lt IParentProps gt

User · Answer

If you are passing functional component as props to anyother component use following  import React from  react    type RenderGreetingProps       element  React FunctionComponent lt any gt      function RenderGreeting props  RenderGreetingProps      const  element  Element    props     return  lt span gt Hello   lt Element   gt   lt  span gt

User · Answer

This is a confusion between constructors and instances  Remember that when you write a component in React  class Greeter extends React Component lt any  any gt        render             return  lt div gt Hello   this props whoToGreet  lt  div gt            You use it this way  return  lt Greeter whoToGreet  world    gt    You don t use it this way  let Greet   new Greeter    return  lt Greet whoToGreet  world    gt    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  quot Object is not a function quot    The problem with this code function renderGreeting Elem  React Component lt any  any gt         return  lt span gt Hello   lt Elem   gt   lt  span gt      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     gt  React Component lt any  any gt         return  lt span gt Hello   lt Elem   gt   lt  span gt      or similarly  function renderGreeting Elem  typeof React Component        return  lt span gt Hello   lt Elem   gt   lt  span gt

User · Answer

You can use  function renderGreeting props   Elem  React Component lt any  any gt          return  lt span gt Hello   props Elem   lt  span gt       However  does the following work   function renderGreeting Elem  React ComponentType        const propsToPass    one  1  two  2        return  lt span gt Hello   lt Elem     propsToPass    gt   lt  span gt

User · Answer

If you want to take a component class as a parameter  vs an instance   use React ComponentClass   function renderGreeting Elem  React ComponentClass lt any gt         return  lt span gt Hello   lt Elem   gt   lt  span gt

User · Answer

As  Jthorpe alluded to  ComponentClass only allows either Component or PureComponent but not a FunctionComponent   If you attempt to pass a FunctionComponent  typescript will throw an error similar to     Type   props  myProps    gt  Element  provides no match for the signature  new  props  myProps  context   any   Component lt myProps  any  any gt      However  by using ComponentType rather than ComponentClass you allow for both cases  Per the react declaration file the type is defined as     type ComponentType lt P      gt    ComponentClass lt P  any gt    FunctionComponent lt P gt

User · Answer

If you really don t care about props then the widest possible type is React ReactType    This would allow passing native dom elements as string  React ReactType covers all of these   renderGreeting  button    renderGreeting      gt   Hello  World     renderGreeting class Foo extends React Component      render           return  Hello  World

User · Answer

In my case I was missing new inside the type definition  some-js-component d ts file  import   as React from  quot react quot    export default class SomeJSXComponent extends React Component lt any  any gt        new  props  any  context   any     and inside the tsx file where I was trying to import the untyped component  import SomeJSXComponent from  some-js-component   const NewComp      asdf    NewProps    gt   lt SomeJSXComponent withProps  asdf    gt

User · Answer

When declaring React Class component  use React ComponentClass  instead of React Component then it will fix the ts error

User · Answer

If you are using material-ui  go to type definition of the component  which is being underlined by TypeScript  Most likely you will see something like this  export   default   from    ComponentName     You have 2 options to resolve the error   1 Add  default when using the component in JSX   import ComponentName from    ComponentName   const Component        gt   lt ComponentName default   gt    2 Rename the component  which is being exported as  default   when importing   import   default as ComponentName   from    ComponentName   const Component        gt   lt ComponentName   gt    This way you don t need to specify  default every time you use the component

[reactjs] What does the error "JSX element type '...' does not have any construct or call signatures" mean?

Examples related to reactjs

Examples related to typescript

Examples related to material-ui