'(react/prop-types): Missing in props validation' when props interface extends from another

[ggd543]

code snippet

import React, { SFC } from 'react';

const mapDispatch = (dispatch: storeDispatch) => ({
   removeCollection: dispatch.infoLibTable.removeCollection,
});

interface InfoLibTableProps extends ReturnType<typeof mapDispatch> {
}

const App: SFC<InfoLibTableProps> = (props) => {
   props.removeCollection(); 
}

.eslintrc

{ 
  "plugins": [ "eslint-plugin-react"]
}

when running eslint , I got the following warning:
warning 'removeCollection' is missing in props validation react/prop-types

[srittau]

I also get this error for x with the following code since today's run of "yarn upgrade":

interface Foo {
    x: number;
}

interface Bar extends Foo {
    y: string;
}

const Baz = ({ x, y }: Bar) => (
    <span>
        {x}
        {y}
    </span>
);

While yarn upgrade also upgraded eslint-plugin-react from 7.20.0 to 7.20.1, this doesn't seem to be the root cause if this error. Manually downgrading it to 7.20.0 or 7.19.0 still gives this error. I suspect it is due to one of eslint-plugin-react's dependencies.

[srittau]

This error actually occurs a second time in our code base after the upgrade:

function useBar(): { x: number; y: string } {
    return { x: 123, y: "" };
}

const Foo = () => {
    const props = useBar();
    return <span>{props.x}</span>; // 'x' is missing in props validation 
};

Renaming props to something more sensible fixes this, but maybe it's a hint for what's going on.

[jacogr]

So worked around all these changing all my extends. Now on the latest version now seems complains when the props are defined but the component returns React.ReactElement<Props> | null - with the | null it just breaks all over again. An example -

interface Props {
  value?: string;
}

// without the | null, all ok, with it, it is broken
function Test ({ value }: Props): React.ReactElement<Props> | null {
  if (!value) {
    return null;
  }

  return <div>{value}</div>;
}

Additionally, this is also problematic (was working before most recent update to .3, same as above) -

import { ComponentProps as Props } from './types';

function Test ({ className = '' }: Props): React.ReactElement<Props> {
  return <div className={className}>something</div>;
}

[einarolafs]

I'm also having this problem using React.FunctionalComponent, would be great to have this supported. My issue is as follows:

type Props = {
    title: string;
    name?: string;
};
const Component: React.FC<Props> = ({title, name}) => (...)

This will give me the error that the props validation is missing

'...' is missing in props validation eslint(react/prop-types)

[drodriguln]

I'm also having this problem using React.FunctionalComponent, would be great to have this supported. My issue is as follows:

type Props = {
    title: string;
    name?: string;
};
const Component: React.FC<Props> = ({title, name}) => (...)

This will give me the error that the props validation is missing

'...' is missing in props validation eslint(react/prop-types)

I had the same problem. Turns out it didn't like me returning a ternary. 🤷‍♂️

[aplassen]

@drodriguln, same thing for me 🤔

[aplassen]

Also, in other cases, I also get the error described in this issue related to extended props.

[goooseman]

By downgrading back to 7.20.0 (without downgrading any of libraries deps) the problem is resolved, so I believe the problem appeared somewhere between 7.20.1 and 7.20.0

[goooseman]

And it looks like the problem is already solved in the upstream: 4ee6f8e

[ljharb]

@goooseman that's included in v7.20.3. Have you tried that version?

[goooseman]

Yep, I've tried. And it was throwing the error, if Typescript interface has been used.

[ljharb]

@goooseman could you provide a reduced test case that's incorrect in the latest version?

[Multiply]

Using [email protected] we are also seeing the issue.

Example:

interface GenericProps {
  onClose: () => void
}

interface ImplementationProps extends GenericProps {
  onClick: () => void
}

export const Implementation: FC<ImplementationProps> = (
  {
    onClick,
    onClose,
  }: ImplementationProps
) => (
  // ... implementation here
)

It'll complain about the prop from the extended interface onClose missing in props validation.

[einarolafs]

By downgrading back to 7.20.0 (without downgrading any of libraries deps) the problem is resolved, so I believe the problem appeared somewhere between 7.20.1 and 7.20.0

The issue I was having was on 7.20.0. I tried to update to 7.20.3, latest version but made no difference for the problem I mentioned above. That is, of course, a typescript issue, maybe there needs to be a different issue made for that?

[hank121314]

For those who encounter this issue.
If you don't mind, could you please help me to test the extends feature in my develop branch
https://github.com/hank121314/eslint-plugin-react/tree/develop
It might resolve this issue.

[StallionV]

Reason: Seems like if you have used the word "props" in your objects this error gets triggered
e.g. {name: "", props: {..} }
Those looking for a quick fix.
Reverting version back to : 7.16.0
and deleting your package-lock.json, node modules directory and then doing npm install fixed this for us

PS: we tried downgrading to 7.20 and even 7.18 but were still getting the same error
But this needs an immediate fix to stop builds from breaking.

[Cretezy]

The upgrade from 7.20.0 -> 7.20.1 seems to be causing the issue for me.

[aaronlna]

The upgrade from 7.20.0 -> 7.20.1 seems to be causing the issue for me.

Yup. Downgrading back to 7.20.0 resolved this for me.

[damiangreen]

do we know which version this will be released in?

[ljharb]

@damiangreen if you click on the commit that closed the PR, you'll see it's not released in anything yet. So, the answer to your question is "the next release".

[S-Amin]

I just tested the version 7.20.6 and still the same error.
this is my package dependency

        "eslint": "^7.7.0",
        "eslint-config-airbnb-typescript": "^9.0.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-import": "^2.22.0",
        "eslint-plugin-jsx-a11y": "^6.3.1",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react": "^7.20.6",
        "eslint-plugin-react-hooks": "^4.0.8",

this is the eslint consfig file

{
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": [
        "airbnb-typescript",
        // "eslint:recommended",
        // "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier",
        "prettier/react",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.json",
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": ["react", "@typescript-eslint"],
    "rules": {
        "prettier/prettier": ["error"],
        "react/react-in-jsx-scope": "off",
        "import/prefer-default-export": "warn",
        "no-underscore-dangle": "off",
        "no-nested-ternary": "off",
        "@typescript-eslint/no-empty-interface": "warn",
        "@typescript-eslint/naming-convention": [
            "error",
            {
                "selector": "interface",
                "format": ["camelCase", "UPPER_CASE", "PascalCase"]
            }
        ]
    }
}

and there are multiple components that eslint threw this error ... is missing in props validation

[ljharb]

@S-Amin thanks; could you file a new issue?

[chidioguejiofor]

@ljharb upgrading to the latest version 7.21.1 fixes this

[Siphenathi-Nathi]

For me, upgrading eslint-plugin-react to the latest version 7.21.5 fixed this

[thayllachristine]

in v7.22.0 this problem continues! I did downgrade to cited versions, but the issue persists. 😢

[ljharb]

@thayllachristine please file a new issue?

[sambhav-gore]

We are facing the same issue. with v7.22.0

[ljharb]

@sambhav-gore please file a new issue?

[zakur777]

we have the same problem with version 7.22, I tried to downgrade and I had no results either.

[ljharb]

@zakur777 just like the last three comments; please file a new issue?

[DamengRandom]

By downgrading back to 7.20.0 (without downgrading any of libraries deps) the problem is resolved, so I believe the problem appeared somewhere between 7.20.1 and 7.20.0

not working for my case ...

[ljharb]

@DamengRandom then please file a new issue?

[DamengRandom]

Hi @ljharb,

Would you know how to fix this issue without disable the eslint rule? I really wish this error can be fixed: (FYI, I am using typescript and material-ui)

[DamengRandom]

Hi @ljharb, its really hard one for me now, but I use an alternative solution to resolve this issue:

which is instead of using arrow function, we use normal function, something like this:

function DrawerList({ toggleDrawer }: DrawerListInterface): React.ReactElement { ... }

NOT use this:

const DrawerList: React.FC<DrawerListInterface> = ({ toggleDrawer }) => { ... }

However, I still want to typescript to fix this issue (at least if my codebase is using typescript, this rule does not require, which should only be available on es6, right?) Or would you mind to offer me some feedback?

[SalahAdDin]

Hi @ljharb, its really hard one for me now, but I use an alternative solution to resolve this issue:

which is instead of using arrow function, we use normal function, something like this:

function DrawerList({ toggleDrawer }: DrawerListInterface): React.ReactElement { ... }

NOT use this:

const DrawerList: React.FC<DrawerListInterface> = ({ toggleDrawer }) => { ... }

However, I still want to typescript to fix this issue (at least if my codebase is using typescript, this rule does not require, which should only be available on es6, right?) Or would you mind to offer me some feedback?

It seems there is no any fix to this problem.