TypeScript TS2339 error in React component: Property 'xyz' does not exist on type 'IntrinsicAttributes…'

Issue

I am trying to create a simple React component that takes any properties. The following syntax with any refuses to work (unexpected token just before <):

export class ValidatedInput extends React.Component<any, any> {...}

The error goes away by replacing any with {} (can someone please explain the difference):

export class ValidatedInput extends React.Component<{}, {}> {...}

However, now when I use the component in another file, it complains about the properties that I send into the component. For example:

<ValidatedInput
    entity={book}
/>

This gives me an error:

TS2339: Property ‘entity’ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes’ & Readonly<{ children?: ReactNode;…’

What’s TypeScript upset about? Can someone please help?

Thanks in advance!

Solution

It looks like compiler does not understand that you are using tsx syntax. Verify that your file has ‘tsx’ extension.

Answered By – Amid

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0