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

False-positive for rule no-this-in-sfc #2147

Closed
markogresak opened this issue Jan 29, 2019 · 2 comments
Closed

False-positive for rule no-this-in-sfc #2147

markogresak opened this issue Jan 29, 2019 · 2 comments

Comments

@markogresak
Copy link

markogresak commented Jan 29, 2019

This code produces a false-positive error:

import React, { Fragment } from 'react';

const CustomComponent = () => {};

const Example = ({ prop }) => {
    return {
        handleClick: () => {
            console.log('click');
        },

        renderNode({ children, value }) {
            return (
                <Fragment>
                    {children}
                    <CustomComponent 
                        onClick={this.handleClick} 
                        value={value} 
                        prop={prop} 
                    />
                </Fragment>
            );
        },
    };
};

export default Example;
example.jsx:15:47: Stateless functional components should not use this [Error/react/no-this-in-sfc]

Problems:

  1. The Example is not an SFC. It returns a plain object.
  2. The renderNode is a render function, the this.handleClick is valid reference to the handleClick function on the object returned by Example.

Expected behaviour:
The rule correctly detects the context of the render function and doesn't treat it as an SFC.

A smaller, console-testable example to show that the above code works:

const X = {
    getRandomValue: () => 4,
    double() {
        return this.getRandomValue() * 2;
    },
};
console.log(X.double());

Using:

  • eslint-plugin-react@7.12.4
  • eslint@5.12.1
  • rule config: "react/no-this-in-sfc": "error"
@ljharb
Copy link
Member

ljharb commented Jan 29, 2019

Typically, render functions should be SFCs - however I agree that in this case (an object literal member, and a name that doesn't start with a capital letter) it shouldn't be detected as a component.

(also, this.handleClick is very brittle, since if someone does const { renderNode } = object it will break, and a standalone render function is typically invoked without any receiver)

@mjdavidson
Copy link

false positive for https://github.com/sequelize/sequelize models, need to use

this.getDataValue('deadline')

to get the underlying data value

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