react/no-unused-prop-types false positive

[mikelambert]

This code:

import React from 'react';

type ObjectType = {
  usedDirectly: string;
  usedFromArray: string;
};

export class UseDirectly extends React.Component {
  props: {
    object: ObjectType;
  }

  render() {
    console.log(this.props.object.usedDirectly);
    return null;
  }
}

export class UseFromArray extends React.Component {
  props: {
    objects: Array<ObjectType>;
  }

  render() {
    console.log(this.props.objects[0].usedFromArray);
    return null;
  }
}

triggers this warning:

5:18  error  'object.usedFromArray' PropType is defined but prop is never used  react/no-unused-prop-types

Though strangely, this code encounters no errors:

import React from 'react';

type ObjectType = {
  usedDirectly: string;
  usedFromArray: string;
};

export class UseDirectly extends React.Component {
  props: {
    object: any;
  }

  render() {
    console.log(this.props.object.usedDirectly);
    return null;
  }
}

export class UseFromArray extends React.Component {
  props: {
    objects: Array<ObjectType>;
  }

  render() {
    console.log(this.props.objects[0].usedFromArray);
    return null;
  }
}

So you don't have to go hunting/searching, the only difference between them is the object: ObjectType vsobject: any. (Not sure why changing UseDirectly would affect the used-ness of usedFromArray field.)

[Eschon]

This is probably related to / a duplicate of #811

[DianaSuvorova]

This looks like a flow issue. Can we add a label please :) @ljharb thank you!

[guyellis]

I've just hit what I think is the same problem as this. Not sure if this helps you.

File: https://github.com/guyellis/plant/blob/master/app/components/common/InputCombo.jsx

Contents copied here in case it changes in the interim:

const React = require('react');
const TextField = require('material-ui/TextField').default;
const PropTypes = require('prop-types');

function inputCombo(props) {
  const {
    changeHandler,
    disabled = false,
    error,
    fullWidth = true,
    label,
    multiLine = false,
    name: namo,
    placeholder,
    style = {},
    type = 'text',
    value,
  } = props || {};

  const underlineStyle = {
    display: 'none',
  };

  const styler = Object.assign({
    marginLeft: 20,
  }, style);

  return (
    <TextField
      disabled={disabled}
      errorText={error}
      floatingLabelText={label}
      fullWidth={fullWidth}
      hintText={placeholder}
      multiLine={multiLine}
      name={namo}
      onChange={changeHandler}
      style={styler}
      type={type}
      underlineStyle={underlineStyle}
      value={value}
    />
  );
}

inputCombo.propTypes = {
  changeHandler: PropTypes.func.isRequired,
  error: PropTypes.string,
  fullWidth: PropTypes.bool,
  label: PropTypes.string,
  multiLine: PropTypes.bool,
  name: PropTypes.string.isRequired, // eslint-disable-line no-dupe-keys
  placeholder: PropTypes.string,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object,
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]).isRequired,
};

inputCombo.defaultProps = {
  error: '',
  fullWidth: true,
  label: '',
  multiLine: false,
  placeholder: '',
  style: {},
};

module.exports = inputCombo;

Error: https://travis-ci.org/guyellis/plant/builds/263855440

/home/travis/build/guyellis/plant/app/components/common/InputCombo.jsx

  47:18  error  'changeHandler' PropType is defined but prop is never used  react/no-unused-prop-types
  48:10  error  'error' PropType is defined but prop is never used          react/no-unused-prop-types
  49:14  error  'fullWidth' PropType is defined but prop is never used      react/no-unused-prop-types
  50:10  error  'label' PropType is defined but prop is never used          react/no-unused-prop-types
  51:14  error  'multiLine' PropType is defined but prop is never used      react/no-unused-prop-types
  52:9   error  'name' PropType is defined but prop is never used           react/no-unused-prop-types
  53:16  error  'placeholder' PropType is defined but prop is never used    react/no-unused-prop-types
  55:10  error  'style' PropType is defined but prop is never used          react/no-unused-prop-types
  56:10  error  'value' PropType is defined but prop is never used          react/no-unused-prop-types

To reproduce, clone that repo and npm i && npm run lint and you should see that. (Using Node 8.x)

[ljharb]

@guyellis your "plant" repo seems to have been deleted.

If this is still a problem on the latest version of the plugin, please file a new issue with a repro.