Eslint-plugin-react: Referencing with PropTypes.shape

[vutran]

When referencing shaped PropTypes, it is producing react/no-unused-prop-types.

See below:

const myComponent = ({ bar }) => (
  <div>
    {bar.a}
    {bar.n}
    {bar.c}
  </div>
);

myComponent.propTypes = {
  bar: PropTypes.shape({
    a: PropTypes.string, // react-no-unused-prop-types
    b: PropTypes.string, // react-no-unused-prop-types
    c: PropTypes.string, // react-no-unused-prop-types
  }),
};

Also errors for:

const myComponent = (props) => {
  const bar = props.bar; // produces errors
  // const { bar } = props; // produce errors
  return (
    <div>
      {bar.a}
      {bar.n}
      {bar.c}
    </div>
  );
}

We would have to use it directly to avoid errors:

const myComponent = (props) => {
  return (
    <div>
      {props.bar.a}
      {props.bar.n}
      {props.bar.c}
    </div>
  );
}

[EvHaus]

Duplicate of #837.

The no-unused-prop-types rule does not support shape props at the moment as such detection is very difficult. If you use shape props, I recommend setting the skipShapeProps option to true on the rule.

[ljharb]

This is still a bug. If it doesn't support shape props, it should skip them in all cases.

[tleunen]

Any update on this? Can we make a patch to skip them until a better detection is done?

[DianaSuvorova]

if the rule is using options: [{skipShapeProps: true}] (it is default), it would skip validation. Should be closed.

[ljharb]

Yes, but if it's using false, this should work.