Solution for the error “JSX element type does not have any construct or call signatures” in React

Posted on by Christopher
JSX element type does not have any construct or call signatures

If you are having trouble with the error message: “JSX element type does not have any construct or call signatures” in React, this post is for you. We will show you how to use React.ElementType type for this problem. Keep reading for more information.

How does this error occur?

You will receive the error when you try to pass a React component or an element as props to another element but type the component the wrong way.

You will see the error appear in the following example:

import React from "react";
import './Demo.css'

interface StudentProps {
    student: JSX.Element;
}

const Container: React.FunctionComponent<StudentProps> = (props) => {
    const { student: Student } = props;
    return (
        <div>
            <Student name="Clyde" id="20187229" /> // Error occurred here
        </div>
    );
};

const Demo: React.FunctionComponent = () => {
    const message = ({ name, id }: { name: string, id: string }) => (
        <h1>{name} whose ID is {id} is the most excellent student this semester.</h1>
    );

    return (
        <div className="content">
            <Container student={message} />
        </div>
    );
};

export default Demo;

Error:

JSX element type 'Student' does not have any construct or call signatures.

You get this kind of error because you tried to pass a React component as props but did not define its type as ‘React.ElementType’. In this example, the type of the React component is ‘JSX.Element’ so that you get the above error message.

Solved – JSX element type does not have any construct or call signatures

To get around this issue, change the type of the React component you pass to ‘React.ElementType’.

import React from 'react';
import './Demo.css'

interface StudentProps {
    student: React.ElementType;  // Using React.ElementType instead of JSX.Element
}

const Container: React.FunctionComponent<StudentProps> = props => {
    const { student: Student } = props;
    return (
        <div>
            <Student name="Clyde" id="20187229" />
        </div>
    );
};

const Demo: React.FunctionComponent = () => {
    const message = ({ name, id }: { name: string, id: string }) => <h1>{name} whose ID is {id} is the most excellent student this semester.</h1>;

    return (
        <div className='content'>
            <Container student={message} />
        </div>
    );
};

export default Demo;

Output:

You can use React.ElementType to pass a generic type to the type of props the element expects.

We can also use React.ComponentType. However, we will be asked to type the props. Take a look at the following example.

import React from "react";
import "./Demo.css";

interface StudentProps {
    student: React.ComponentType<{ name: string, id: string }>; // Using React.ComponentType instead of JSX.Element
}

const Container: React.FunctionComponent<StudentProps> = (props) => {
    const { student: Student } = props;
    return (
        <div>
            <Student name="Clyde" id="20187229" />
        </div>
    );
};

const Demo: React.FunctionComponent = () => {
    const message = ({ name, id }: { name: string, id: string }) => (
        <h1>
            {name} whose ID is {id} is the most excellent student this semester.
        </h1>
    );

    return (
        <div className="content">
            <Container student={message} />
        </div>
    );
};

export default Demo;

Output:

It can be seen that you still get the same results as you used React.ElementType.

We must type the props explicitly because of the generic in  React.ComponentType doesn’t default to any type. Specifically, in this example, we have to declare two properties: ‘name’ and ‘id’ of type ‘string’.

Summary

In conclusion, you must use React.Element to solve the error: “JSX element type does not have any construct or call signatures” in React. That’s the end of this article. Hopefully, the examples above have helped you understand the general idea for fixing this problem.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *