Eslint-plugin-react: False Positive: "react/prop-types [PROP_NAME] is missing in props validation" when using stateless components + destructured param + Flow

[ayrton]

Similar to #467, I found a minor bug with stateless components with flow annotations.

/Users/adc/Developer/ayrton/react-key-handler/demo/components/demos/input-element.js
  9:16  error  'keyName' is missing in props validation  react/prop-types

/* @flow */

import React from 'react';

type Props = {
  keyName: ?string,
};

function Demo({keyName}: Props): React$Element {
  return (
    <div>
      {keyName}
    </div>
  );
}

This is caused because of destructuring, when I don't destructure the props all is fine:

function Demo(props: Props): React$Element {
  return (
    <div>
      {props.keyName}
    </div>
  );
}

[shrijan00003]

is there any update or solution for this issue ??

[ljharb]

It’s been fixed for years. Please file a new issue if you’re having trouble.

[alekpentchev]

Hi all. I have this issue when I'm using stateless functional components and Flow. The code looks like this:

const renderForm = (): Node => {
    const { action } = props;
    const { form } = css;

    if (!action) {
      return null;
    }
    return (
      <form
        onSubmit={onSubmit}
        acceptCharset="UTF-8"
        className={form}
        method="post"
        action={action}
      >
        {displayInputs()}
      </form>
    );
  };

several lines above there is component declaration:

export function Form(props: Props) {
...
}

Props are imported from other file.

My eslint-plugin-react version is 7.14.3. So how should I solve this problem?

[ljharb]

renderForm should be a component, but perhaps Form needs PropTypes. It’s hard to tell. Can you file a new issue, after upgrading to the latest version of this plugin?

[alekpentchev]

renderForm should be a component, but perhaps Form needs PropTypes. It’s hard to tell. Can you file a new issue, after upgrading to the latest version of this plugin?

Yes, apparently. After adding PropTypes this error is no longer reported by eslint. Which is strange. And, in my opinion, it's not the best approach to have Flow and PropTypes for defining types.

[ljharb]

Both are required; neither flow nor typescript is capable of catching everything PropTypes can.

[ExpectoPatrom]

I'm using eslint-plugin-react 7.20.3 and I'm having the same issue, do you have any idea of what should do?

[ljharb]

@ExpectoPatrom would you mind filing a new issue? please include the code and the warnings.

[huntu1992]

@ExpectoPatrom same here

[matthewgoslett]

I can confirm this is happening for me on ^7.21.5

[ExpectoPatrom]

Hey, nope. It seems like this is not a bug, instead it's kind a bad practice and there's another way of doing the components. I can't remember it specifically but I'm gonna search and then I post it

[alielkhateeb]

This is happening to me whether I destructure props or not, is anyone else facing this issue?

[ljharb]

@alielkhateeb please file a new issue