JSX element does not have construct or call signatures

Question

Creating a HOC Class that looks around a bunch of Components set in the "child" class.

import * as React from 'react';

export class Container<C = any, P = {}> extends React.Component {

    Components: C[]

    props: React.PropsWithChildren<P>

    render() {

        return (
            <>
                {this.Components.map((Component: C, index) => {

                    return (
                        <Component key={index} />
                    )
                })}
            </>
        )
    }
}

In the parent class, I'm getting the below error in VSCode.

JSX element type 'Component' does not have any construct or call signatures.ts(2604)

Answer 1

You have a lot of errors here. I'm not understanding how this is an HOC or how it works since the property this.Components is not set anywhere. A higher-order component is a function which takes a component and returns a component. It can be a function which returns a class, but it is not itself a class.

The particular error in your question is due to the generic C which is the type of the each component in this.Components. You have said that C can be literally anything, so it doesn't have to be a valid callable component. That's why you are getting the error that "JSX element type 'Component' does not have any construct or call signatures." Get rid of C and make your components be the type React.ComponentType. This ensures that they are callable through JSX.