Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

no-unused-props unable to handle inline functions #1309

Closed
Robinfr opened this issue Jul 20, 2017 · 6 comments
Closed

no-unused-props unable to handle inline functions #1309

Robinfr opened this issue Jul 20, 2017 · 6 comments

Comments

@Robinfr
Copy link

Robinfr commented Jul 20, 2017

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;
@ljharb
Copy link
Member

ljharb commented Jul 20, 2017

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.

@Robinfr
Copy link
Author

Robinfr commented Jul 20, 2017

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

@DianaSuvorova
Copy link
Contributor

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

@ljharb ljharb closed this as completed in 2d2cf65 Jul 23, 2017
@Robinfr
Copy link
Author

Robinfr commented Jul 24, 2017

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

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...

@Robinfr
Copy link
Author

Robinfr commented Jul 24, 2017

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

@ljharb ljharb reopened this Jul 24, 2017
@DianaSuvorova
Copy link
Contributor

@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!

@ljharb ljharb closed this as completed in bc5435d Jul 26, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

3 participants