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.

[nivalderramas]

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

[nivalderramas]

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

[ttcode10]

I found this is useful: https://hashnode.blainegarrett.com/making-eslint-happy-in-mixed-typescriptjavascript-projects-ck5lge2v204cgqks1sk4nlp85

[denven]

Very confusing! Still reports error on eslint-plugin-react": "^7.23.1",

AppProvider.propTypes = {
  children: PropTypes.any.isRequired,
};

  21:8   error  'React' is defined but never used          no-unused-vars  # No React imported in the js file
  74:24  error  'children' is missing in props validation  react/prop-types # Still complains

[ljharb]

@denven please file a new issue.

[Dinkelborg]

How is this still an issue after 5 years?

`interface Props { children?: React.ReactNode; }

const SomeHandlerComponent: FC = ({ children }) => {`

ESLint 2.1.23

[mosoakinyemi]

This is still an issue? Guys kindly look at this 🔧

[PerfectionVR]

this will fail, complaining that text, callback isn't prop validated, this resulted in

  21:46  error  'text' is missing in props validation      react/prop-types
  21:52  error  'callback' is missing in props validation  react/prop-types

const Markdown: React.FC<MarkdownProps> = ({ text, callback }: MarkdownProps): React.ReactElement => {
  const settings = {
    createElement: React.createElement,
    components: {},
    elements: {
      p(props) {
      // return some component
      },
    },
  };
  const compile = marksy(settings);
  const description = compile(text).tree;
  return <div className="markdown">{description}</div>;
};

this will be accepted as valid though

const p: React.FC = ()=>{};
const Markdown: React.FC<MarkdownProps> = ({ text, callback }: MarkdownProps): React.ReactElement => {
  const settings = {
    createElement: React.createElement,
    components: {},
    elements: {
      p,
    },
  };
  const compile = marksy(settings);
  const description = compile(text).tree;
  return <div className="markdown">{description}</div>;
};

I was able to repeatedly repoduce between these two scenarios

using react 16 + eslint-plugin-react 7.26.0

[ljharb]

@PerfectionVR can you file this as a new issue?

[s4shebi]

one can turn off this type of errors by just adding "react/prop-types": ["off"], in the rules of .eslintrc.js

[ideepakpg]

any solution for " 'prop' is mssing in prop validation " error except disabling prop types

[ljharb]

@ideepakpg please file a new issue and i'll take a look