Eslint-plugin-react: Destructuring props in a stateful component triggers 'react/no-unused-prop-types' with flow in nested components

[karl-run]

When accessing the props directly, through this.props.foo.bar it works as expected, but if I destructure foo const { foo } = this.props and then access bar through it, it is still not registered as used and will be flagged with react/no-unused-prop-types.

Full example:

type Props = {
  foo: {
    bar: boolean, // error  'foo.bar' PropType is defined but prop is never used
  },
};

class DigitalServices extends React.Component {
  props: Props

  render() {
    const { foo } = this.props;

    return <div>{foo.bar}</div>;
  }
}

This works as expected:

class DigitalServices extends React.Component {
  props: Props

  render() {
    return <div>{this.props.foo.bar}</div>;
  }
}

[karl-run]

Defining foo as its own type does not help.

type Foo = {
  bar: boolean,
};

type Props = {
  foo: Foo,
};

Exact same behaviour.

[karl-run]

Might be related to #1002 and #933.

[DianaSuvorova]

Thanks @karl-run for providing super concise repro example and also possible workarounds.

The problem was that flow props ignored plugin configurations skipShapeProps so it tried to validate it. So "fix" is ignoring shape props during validation.

Validating shape props correctly is a whole different issue and is well known for this library. I might look into that eventually 🙂

[robguy21]

Excuse the code below but it's throwing an error that is meant to be resolved in #1341

<SomeComponent
  onDatesChange={
    ({
      startDate,
      endDate,
    }: {
      startDate: string, // error  'startDate' PropType is defined but prop is never used  react/no-unused-prop-types
      endDate: string, // error  'endDate' PropType is defined but prop is never used    react/no-unused-prop-types
    }): void => {
      this.setState({ startDate, endDate });
      this.datepickerChanged({
        start: startDate,
        end: endDate,
      });
      return null;
    }
  }
</SomeComponent>

package.json

"eslint-plugin-flowtype": "^2.42.0",
"babel-plugin-flow-react-proptypes": "^17.1.0",
"babel-eslint": "^8.1.1",
"eslint": "^4.16.0",
"eslint-plugin-react": "^7.6.1",
"flow-bin": "^0.64.0",

.eslintrc

"react/no-unused-prop-types": [2, { skipShapeProps: true }],

Requesting for this issue to be re-opened- let me know if I need to give more info.

[ljharb]

Could you file a new issue instead?