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

Question

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

You can't dynamically construct elements like that. 'a' isn't a React element, it's a string. — jonrsharpe
– jonrsharpe, Commented Nov 29, 2018 at 20:13
What about const Tag = (props) => React.createElement(props.link ? 'a' : 'div', { className: "dummy" }, props.children); However this is just a simple component that you could initialize outside the class. — kind user
– kind user, Commented Nov 29, 2018 at 20:23
What you are doing in valid JS. I just had a similar issue when updating from TS 3.1.6 to 3.2.1 so it might be an issue with the last TS update... — Tom Esterez
– Tom Esterez, Commented Dec 3, 2018 at 23:59

Peter Ambruzs · Accepted Answer · 2018-12-01 07:20:43Z

1

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);

edited Dec 1, 2018 at 7:20

answered Nov 30, 2018 at 9:30

Peter Ambruzs

8,2214 gold badges33 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2133404 Over a year ago

const Tag: any fixed this error!! I believe it is expecting a type for Tag. Can you please tell me what would be the type other than any? string fails

Peter Ambruzs Over a year ago

I made some experiment with the code. It works for me with enum. It is much better than any I think. I updated the answer accordingly.

Akash Bhandwalkar · Accepted Answer · 2018-11-30 09:22:23Z

0

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.

answered Nov 30, 2018 at 9:22

Akash Bhandwalkar

8915 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related