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.

[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?

[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