What is the component argument type passing in ReactDOM.render?

Question

I am trying to write a function to help test each components.

function testComponent(component: any): void {
  const div = document.createElement('div');
  ReactDOM.render(component, div);
  ReactDOM.unmountComponentAtNode(div);
}

I got a warning from typescript-eslint when run lint.

warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any

So I try to see what passes in ReactDOM.render, here it is

export interface Renderer {
    // Deprecated(render): The return value is deprecated.
    // In future releases the render function's return type will be void.

    <T extends Element>(
        element: DOMElement<DOMAttributes<T>, T>,
        container: Element | null,
        callback?: () => void
    ): T;

    (
        element: Array<DOMElement<DOMAttributes<any>, any>>,
        container: Element | null,
        callback?: () => void
    ): Element;

    (
        element: SFCElement<any> | Array<SFCElement<any>>,
        container: Element | null,
        callback?: () => void
    ): void;

    <P, T extends Component<P, ComponentState>>(
        element: CElement<P, T>,
        container: Element | null,
        callback?: () => void
    ): T;

    (
        element: Array<CElement<any, Component<any, ComponentState>>>,
        container: Element | null,
        callback?: () => void
    ): Component<any, ComponentState>;

    <P>(
        element: ReactElement<P>,
        container: Element | null,
        callback?: () => void
    ): Component<P, ComponentState> | Element | void;

    (
        element: ReactElement[],
        container: Element | null,
        callback?: () => void
    ): Component<any, ComponentState> | Element | void;
}

The typing is a little big, and I cannot find a type which can replace any directly.

I tried Component, but it gives this warning on my IDE

Argument of type 'Component<{}, {}, any>' is not assginable to parameter of type 'TreactElement ReactElement Component)> | null) | (new (props: any) => Component)>[]'.

Is there a such a type or other ways to fix it without ignoring the lint warning? Thanks

Answer 1

Sorry, I missed ReactElement.

I originally thought it should be the type Component because I passed in a component. Turns out it is ReactElement.

import { ReactElement } from 'react';

function testComponent(component: ReactElement): void {
  const div = document.createElement('div');
  ReactDOM.render(component, div);
  ReactDOM.unmountComponentAtNode(div);
}