Property does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'

Question

I have react project created by Create-React-App having following packages (mentioning packages related to my issue):

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"typescript": "^3.9.2",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0"

i have created a simple HOC (which does nothing as of now, but i'll add my logic later) like this:

type Props = {
    [key: string]: any;
};


const connect = function (Component: FunctionComponent): FunctionComponent {
    const ComponentWrapper = function (props: Props): ReactElement {
        return <Component {...props} />;
    };

    return ComponentWrapper;
};

and exported my component like this:

    const Test: FunctionComponent<Props> = function ({ message }: Props) {
        return (
            <div>{message}</div>
        );
    };


export default connect(Test);

and using this component like this:

<Test message="Testing message" />

But getting error in compiler:

Type '{ message: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'message' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.  TS2322

I have tried what people have suggested in other similar Stack Overflow questions and article found on Google, but nothing worked till yet.

Answer 1

// This is the piece we were missing --------------------v
const connect = function (Component: React.FC): React.FC<Props> {
    const ComponentWrapper = function (props: Props): JSX.Element {
        return <Component {...props} />;
    };

    return ComponentWrapper;
};

and after restarting the compiler it'll work fine.

The type of the return value of the connect function is a functional component that requires Props , not a bare functional component.

See also the cheatsheet

Answer 2

It's not a problem with the parent component. It's a problem with the child component. Just define props in your child component and this error from the parent component should disappear.

Parent: <ChildComponent {...props} />

But also define in Child Components like below:

Child: export default function Loading(props) {