react/no-unused-prop-types false positive on destructured props

[victorias]

react/no-unused-prop-types thinks that both the onClick and children props are unused even though these are clearly being used:

type Props = {
  onClick: () => void,
  children: any,
};

class Button extends Component {
  props: Props

  render () {
    const { props } = this;
    return (
      <button
        onClick={props.onClick}
      >
        {props.children}
      </button>
    );
  }
}

export default Button;

If I refer to onClick using this.props.onClick or destructure all the props from this.props it works.

[Augustin82]

We have been encountering the same bug (on an SFC).

[linuxonrails]

Same problem :-(

import React from 'react';

type User = {
  country: string;
};

export default ({ user }: { user: User }) => (
  <div>
    { user.country }
  </div>
);

'user.country' PropType is defined but prop is never used (react/no-unused-prop-types)

[DianaSuvorova]

flow as well. Need a label. @ljharb I want to take a look into supporting flow soon. Gathering use cases. Thank you!

[DianaSuvorova]

first use case here is a known issue with the rule when using an intermediate variable to store props/parts of props.

Second is fixed on master.

[derwaldgeist]

Same if you use a prop by simple deconstructing like this:

render({userId = 123}) {
  ...
}

[ljharb]

@derwaldgeist you can't use props like that; render takes no arguments.

[derwaldgeist]

Yep, just found this out myself 👍 I was turning a stateless component in a class and missed this.

[jseminck]

I've adding support for this in #1393 which is still WIP. Will add these test cases but I'm quite sure they work already.