I am trying to pass component to Child component but TS still complains about it.

Here is the code:

import React, {Component} from 'react';


interface ChildProps {
    name: string,
    compToRender: React.ComponentType
}

class Child extends Component<ChildProps> {
    render() {
        return <div>
            {this.props.name}
        </div>
    }
}

class ComponentToRender extends Component {
    render() {
        return <div>Hello</div>
    }
}


class Parent extends Component {
    render() {
        return <Child name='Child' compToRender={<ComponentToRender/>}/>
    }
}

export default Parent

Right now it seems like the issue with:

Error:(26, 36) TS2322: Type 'Element' is not assignable to type 'ComponentType<{}>'. Type 'Element' is not assignable to type 'FunctionComponent<{}>'. Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement ReactElement Component)> | null) | (new (props: any) => Component<...>)> | null'.

but I am not really have a grasp what is it about.

May you suggest something?

Thanks!

0 Answers