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.

If you think there are possible duplicates to this question that you have already studied, by all means list them, and say why they are not applicable. However it is generally better not to state there are no duplicates at all, since you cannot have checked all possible questions. Readers would like you to be open to a duplicate if one is offered. — halfer, May 17 '20 at 14:39
@halfer earlier i got many negative votes just because some users on SO find that duplicate although those were not duplicates and i had to delete those questions. Thanks for your concern. — Ritesh, May 17 '20 at 16:04

score 14 · Accepted Answer · edited Nov 25 '21 at 13:46

14

// 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

edited Nov 25 '21 at 13:46

Caleb

1,452
15
20

answered May 17 '20 at 14:42

Max Arzamastsev

515
1
5
7

26

This would be greatly improved with an explanation about why it works. – bsplosion Aug 03 '21 at 19:44
3

That gave me `Type '{ key: value; }' has no properties in common with type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2559)` – Kfcaio Jan 29 '22 at 14:50

score 0 · Answer 2 · answered Aug 28 '22 at 22:03

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) {

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

2 Answers2