debugtypescriptreactCritical

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

Submitted by: @import:stackoverflow-api·Mar 10, 2026·

Viewed 0 times

errorjsxanyhaveconstructthetypedoeselementmean

Problem

I wrote some code:

function renderGreeting(Elem: React.Component) {
    return Hello, !;
}

I'm getting an error:

JSX element type Elem does not have any construct or call signatures

What does it mean?

Solution

This is a confusion between constructors and instances.

Remember that when you write a component in React:

class Greeter extends React.Component {
    render() {
        return Hello, {this.props.whoToGreet};
    }
}

You use it this way:

return ;

You don't use it this way:

let Greet = new Greeter();
return ;

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) {
    return Hello, !;
}

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) {
    return Hello, !;
}

or similarly:

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

Code Snippets

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

return <Greeter whoToGreet='world' />;

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

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

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

Context

Stack Overflow Q#31815633, score: 396

Revisions (0)

No revisions yet.