Typescript, JSX: render component, passed as argument

Question

I want to write a function, which renders react component, passed as argument to that function. I want to handle both Component and StatelessComponent types. This is how I do that:

function renderComponent(component: React.ComponentClass<any> | React.StatelessComponent<any>) {
    return <component />;
}

I got compilation error:

error TS2604: JSX element type 'component' does not have any construct or call signatures.

What am I doing wrong?

Nitzan Tomer · Accepted Answer · 2016-05-28 14:40:57Z

1

In your example your renderComponent function is getting an instance of a Component and not a class/ctor.
It should be:

function renderComponent(componentClass: { new (): React.ComponentClass<any> | React.StatelessComponent<any> }) {
    return <componentClass />;
}

answered May 28, 2016 at 14:40

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

Typescript, JSX: render component, passed as argument

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related