Eslint-plugin-react: no-unused-props unable to handle inline functions

Created on 20 Jul 2017  路  6Comments  路  Source: yannickcr/eslint-plugin-react

When you do the following, no-unused-props is triggered even though the props are used:

const Thing = (props) => (
    <div>
        {(() => {
            if(props.enabled){
                return (
                    <span>Enabled!</span>
                )
            }

            return (
                <span>Disabled..</span>
            )
        })()}
    </div>
);

Thing.propTypes = {
    enabled: React.PropTypes.bool
};

Thing.defaultProps = {
    enabled: false
};

export default Thing;
bug help wanted

Most helpful comment

@Robinfr, thanks for the updated example. It did uncover a bug in the rule. I created a PR to fix it. Stay tuned for the next release!

All 6 comments

It's difficult to catch every case.

In the meantime, I'd suggest always destructuring all props and state and context at the top of your functions, which has the side benefit of bypassing this problem.

Hmm alright I will see if that helps. Thanks for the reply.

@Robinfr It looks like your case works with master as well as with v7.1.0. Which version are you using?

I'm using 7.1.0.. so this is a bit curious :confused:

EDIT: You are correct however, with this test case I don't get errors. I will check what's different in the real case then...

Updated example:

import React from 'react';

const Thing = (props) => (
    <div>
        <div>
            {(() => {
                if (props.enabled && props.testString) {
                    return (
                        <span>Enabled!</span>
                    );
                }

                return (
                    <span>Disabled..</span>
                );
            })()}
        </div>
    </div>
);

Thing.propTypes = {
    enabled: React.PropTypes.bool,
    testString: React.PropTypes.string
};

Thing.defaultProps = {
    enabled: false
};

export default Thing;

In this case, you have two props, enabled and testString. You will get the following error when linting this:

'enabled' PropType is defined but prop is never used  react/no-unused-prop-types

@Robinfr, thanks for the updated example. It did uncover a bug in the rule. I created a PR to fix it. Stay tuned for the next release!

Was this page helpful?
0 / 5 - 0 ratings