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

3
votes

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!

1
reactjstypescript
Just a guess - make sure you are declaring your compoent in tsx file. – Amid
That was a great guess @Amid! I was porting code over from ES6 and forgot to change the filename. If you could put your guess in an answer, I will mark it as the correct answer. – Naresh

1 Answers

1
votes

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