What type should I use for a React component with arbitrary properties?

Question

I want to use a component like:

<toolProperties.ToolElement
                        onGenerate={onGenerate}
                        postData={postData}
                        status={status}
                        setStatus={setStatus}
                        setToolOutputs={setToolOutputs} />

I have toolProperties typed with:

interface IToolProperties {
    toolName: string;
    title: string;
    description: string;
    ToolElement: React.ComponentType
}

It gives a type error: Type '({ status, setStatus, setToolOutputs, onGenerate, postData }: IToolProps) => Element' is not assignable to type 'ComponentType<{}>'

Is there a better way to type it?

Answer 1

You could make IToolProperties generic as well, e.g.:

interface IToolProperties<T> {
    toolName: string;
    title: string;
    description: string;
    ToolElement: React.ComponentType<T>
}

Then when you have a specific use for this interface, provide the props interface of your ToolElement:

const nameTools: IToolsProperties<{name: string}>

And then this could be used like this:

<nameTools.ToolElement name="foo" />