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

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>
  );
}

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 4
  • Comments: 23 (8 by maintainers)

Most upvoted comments

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

@denven please file a new issue.

@PerfectionVR can you file this as a new issue?

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

I can confirm this is happening for me on ^7.21.5

@alielkhateeb please file a new issue

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