no-unused-prop-types sometimes fails to detect props in functions on stateless components

[pfhayes]

Here is a minimal example that triggers this:

const PagingBlock = function(props) {
  return (
    <span>
      <a onClick={() => props.previousPage()}/>
      <a onClick={() => props.nextPage()}/>
    </span>
 );
};

PagingBlock.propTypes = {
  nextPage: React.PropTypes.func.isRequired,
  previousPage: React.PropTypes.func.isRequired,
};

The error message is:

  18:17  error  'previousPage' PropType is defined but prop is never used  react/no-unused-prop-types

Notes:

• Converting this to a React.createClass with static propTypes fixes the issue
• Removing either <a/> tag produces the correct lint error, the false error only occurs when both are present
• The error is notified for the first tag (switching nextPage and previousPage inside the render function will make the error text say nextPage is defined but not used

[pfhayes]

cc @oliviakim95

[LiJinyao]

this bug also triggers when use ...props.

const PagingBlock = function(props) {
  return (
    <SomeChild {...props} />
 );
};

PagingBlock.propTypes = {
  nextPage: React.PropTypes.func.isRequired,
  previousPage: React.PropTypes.func.isRequired,
};

The error message is the same.

I think we should count all properties as used in this case.

[ljharb]

Agreed.

[tpai]

Same issue...

export default function Content( { post } ) {
    const { title, author, body } = post;
    return (
        <Panel>
            <Article
              title={ title }
              meta={ author }
            >
                <div dangerouslySetInnerHTML={ { __html: body } } />
            </Article>
        </Panel>
    );
}

Content.propTypes = {
    post: PropTypes.shape( {
        title: PropTypes.string.isRequired,
        author: PropTypes.string.isRequired,
        body: PropTypes.string.isRequired,
    } ),
};

'post.title' PropType is defined but prop is never used (react/no-unused-prop-types) [javascript/eslint]
'post.author' PropType is defined but prop is never used (react/no-unused-prop-types) [javascript/eslint]
'post.body' PropType is defined but prop is never used (react/no-unused-prop-types) [javascript/eslint]

[xkr47]

const FormInput = (props) => {
  const {
    input,
    type = "text",
    ...extraProps
  } = props;
  return (
    <div id={input.name + "_view"}>
       <input type={type} id={input.name} {...input} {...extraProps}/>
    </div>
  );
};

FormInput.propTypes = {
  input: React.PropTypes.object.isRequired,
  required: React.PropTypes.bool,
  type: React.PropTypes.string
};

-> complains that required is unused even if it gets used through extraProps.

[kevinSuttle]

@xkr47 But it's not, though. How would ESlint know required, if it's not listed in the inline defaultProps literal or your return statement? It's throwing the error as it's listed in PropTypes, but nowhere else.

[ljharb]

I think because extraProps is a rest arg, every prop in it should be marked as used (and it can be statically known in this case).

[xkr47]

Agree with @ljharb although it's hard to say how far one should go tracing dependencies here..

[nowke]

I have a similar problem with PropTypes.shape.

MyComponent.propTypes = {
  error: PropTypes.shape({
    username: PropTypes.string,
    password: PropTypes.string,
  }),
}

And I pass error to the child component as a whole.
<MyChildComponent error={this.props.error} />

ESLint throws

error  'error.username' PropType is defined but prop is never used  react/no-unused-prop-types
error  'error.password' PropType is defined but prop is never used  react/no-unused-prop-types

[devalnor]

Probably same issue...

import React, { PropTypes } from 'react';

export default function Article(props) {
    const {
        homepageThumb: {
            url: imageUrl,
            width: imageWidth,
            height: imageHeight
        }
    } = props;

    return (

        <img
            src={imageUrl}
            width={imageWidth}
            height={imageHeight}
            alt="thumb"
        />

    );
}

Article.propTypes = {
    homepageThumb: PropTypes.shape({
        url: PropTypes.string,
        width: PropTypes.number,
        height: PropTypes.number
    }).isRequired
};

  59:20  error    'thumbnail_images.homepage-thumb.width' PropType is defined but prop is never used   react/no-unused-prop-types
  60:21  error    'thumbnail_images.homepage-thumb.height' PropType is defined but prop is never used  react/no-unused-prop-types

[BarryThePenguin]

I think I've figured out the source of this bug. Looking at @pfhayes example,

const PagingBlock = function(props) {
  return (
    <span>
      <a onClick={() => props.previousPage()}/>
      <a onClick={() => props.nextPage()}/>
    </span>
 );
};

PagingBlock.propTypes = {
  nextPage: React.PropTypes.func.isRequired,
  previousPage: React.PropTypes.func.isRequired,
};

It looks like when utils.getParentStatelessComponent() is called, the onClick ArrowFunctionExpression is returned instead of the PagingBlock FunctionExpression. In utils.getParentStatelessComponent() there is a regex test being performed on the Function keyword. This would return results for both FunctionExpression and ArrowFunctionExpression.

Need to find a way to differentiate between the two. I'll submit a PR if I can figure it out.