Eslint react/prop-types error with TypeScript

Question

I'm getting the Eslint error: 'age' is missing in props validation eslint (react/prop-types) when using extends for interface for React components using the below seemingly valid example:

interface SuperProps {
  age: number;
}

interface TestProps extends SuperProps {
  name: string;
}

const Test = ({ name, age }: TestProps) => {
  return (
    <p>
      {name}: {age}
    </p>
  );
};

Is this a bug or a feature that I haven't fully grasped?

I believe it to be a bug in package "eslint-plugin-react", because that's a completely valid interface and it should work just fine, but the plugin can't find the props defined in the parent interface. — Telmo Trooper
– Telmo Trooper, Commented Jul 9, 2020 at 13:38
@TelmoTrooper - you're probably right, found this issue that I think is the correct one: github.com/yannickcr/eslint-plugin-react/issues/2654 Strange that this could pass through the checkpoints without being noticed, it should be a common enough pattern. — Max Gordon
– Max Gordon, Commented Jul 9, 2020 at 13:43
Since you are using TS probably there's not need to use eslint checks for prop types and it can be disabled in .eslintrc this way: "react/prop-types": "off"' — lazy.lizard
– lazy.lizard, Commented Nov 10, 2021 at 8:59
Thanks, not really solving the issue. Seems though that the issue has been closed and I haven't tested the functionality lately. — Max Gordon
– Max Gordon, Commented Nov 10, 2021 at 20:26

Gert-Jan Kooijmans · Accepted Answer · 2021-12-07 17:44:08Z

4

In case anyone stumbles upon this question, as mentioned in the question comments there was an issue raised regarding this validation rule here: https://github.com/yannickcr/eslint-plugin-react/issues/2654.

The issue is closed but it seems it is not resolved. The validation rule can be disabled by adding

'react/require-default-props': 0

to the rules in your eslintrc.js file

answered Dec 7, 2021 at 17:44

Gert-Jan Kooijmans

4722 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Eslint react/prop-types error with TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related