question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

no-unused-prop-types false positives

See original GitHub issue

The no-unused-prop-types rule reports false positives for me. Here’s my code:

import React from 'react';
import Buddy from './Buddy';
import Spinner from './Spinner';
import BuddyBox from './BuddyBox';
import '../css/buddies.css';

export default function Buddies(props) {
  let buddies = props.activityBuddies.map(item => (
    <BuddyBox key={item.id} {...item} endFriendship={props.endFriendship} />
  ));

  if (buddies.length === 0) {
    buddies = <Spinner />;
  }

  return (
    <div className="buddies">
      <div className="buddies--content">
        {buddies}
      </div>
      <div className="buddies--sidebar">
        <div className="buddies--add">
          {props.friendrequests && props.friendrequests.map(item => (
            <div key={item.id}>
              <Buddy
                name={item.username}
                profilePicture={item._links.image.href}
                timestamp={item.last_sign_in_at}
              />
              <button
                className="buddies--confirm-button"
                onClick={() => {
                  props.handleFriendrequest(item._links.confirm.href);
                }}
              >
                Confirm
              </button>
              <button
                className="buddies--decline-button"
                onClick={() => {
                  props.handleFriendrequest(item._links.decline.href);
                }}
              >
                Decline
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Buddies.propTypes = {
  activityBuddies: React.PropTypes.array,
  endFriendship: React.PropTypes.func,
  friendrequests: React.PropTypes.array,
  handleFriendrequest: React.PropTypes.func,
};

The no-unused-prop-types-Rule shows an error for both the endFriendship and the handleFriendrequest props but both are used in my component.

I use eslint 3.4.0 and eslint-plugin-react 6.2.0. I use the no-unused-prop-types-Rule as part of eslint-config-airbnb 11.0.0. In the config it is set like this:

'react/no-unused-prop-types': ['error', {
  customValidators: [
  ],
  skipShapeProps: false,
}],

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:39 (14 by maintainers)

github_iconTop GitHub Comments

19reactions
ljharbcommented, Nov 12, 2016

Counting used nextProps in componentWillReceiveProps is a clear win for this rule, certainly.

13reactions
victor-homyakovcommented, Oct 4, 2016

One more example of false positive:

const Button = React.createClass({
    displayName: 'Button',

    propTypes: {
        name: React.PropTypes.string.isRequired,
        isEnabled: React.PropTypes.bool.isRequired
    },

    render() {
        const item = this.props;
        const disabled = !this.props.isEnabled;
        return (
            <div>
                <button type="button" disabled={disabled}>{item.name}</button>
            </div>
        );
    }
});

Here name is marked as unused. In fact, all properties accessed via temporary local variable will be flagged as unused.

Read more comments on GitHub >

github_iconTop Results From Across the Web

`react/no-unused-prop-types` false positive when defining ...
I get false positives when defining the type of a destructured prop. Would greatly appreciate any help! eslint@6.8.0 eslint-plugin-react@7.19.0
Read more >
PropType is defined but prop is never used for arrow function ...
Right now you have named your props variable inner rather than retrieving it and thus inner on your props is never used.
Read more >
How to validate React props using PropTypes - LogRocket Blog
Learn how to validate props with React PropTypes, React's internal mechanism for adding type checking to component props.
Read more >
eslint-remote-tester - npm
It's designed to be used when validating regression of new rules. It can be used to spot whether a new rule flags false...
Read more >
Don't Call PropTypes Warning - React
bool . This pattern by itself is fine, but triggers a false positive because React thinks you are calling PropTypes directly. The next...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found