CODEWITHSUNDEEP
javascriptreactjstypescript
user2133404
user2133404

Reputation: 1857

Typescript react error: JSX element doesn't have any construct or call signatures

I recently upgraded typescript and I am getting the above error in one of my components.

I have the following code in that component render method: 

render() {
   const Tag = props.link ? 'a' : 'div';
   return (
      <Tag className="dummy"> text </Tag>
   );
}

When I return div or a directly in my code, it works correctly. When I return Tag it fails!

EDIT: Open issue in Github: https://www.github.com/Microsoft/TypeScript/issues/28768

Upvotes: 1

Views: 1351

Answers (2)

Peter Ambruzs
Peter Ambruzs

Reputation: 8213

Your code is interesting. I tried it out in Codesandbox and it works for me with TypeScript.

I might using different TypeScript version or tsconfig. Or you use tslint. You can check the example out here. What is the difference?

I used this code, you can repleace the link to '' and it works that way too.

import * as React from "react";
import * as ReactDOM from "react-dom";

interface Props {}

enum TagTypes {
  a = 'a',
  div = 'div'
}

class Hello extends React.Component<Props, {}> {
  render() {
    let link = "#";
    const Tag: TagTypes = link ? TagTypes.a : TagTypes.div;
    return (
      <Tag className="dummy" href={link}>
        text
      </Tag>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Hello />, rootElement);

Upvotes: 1

Akash Bhandwalkar
Akash Bhandwalkar

Reputation: 901

Inside render you have declared const Tag as string.

Now inside return block, React will search for JSX syntax, here React expect Tag as element/class.

If you remove const Tag = ... you will get an error saying Tag is not defined or similar

Lastly, Datatype is mismatching in your problem statement.

Upvotes: 0

Related Questions