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


        

Answer 1

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, !;
}