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

[markogresak]

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:

• [email protected]
• [email protected]
• rule config: "react/no-this-in-sfc": "error"

[ljharb]

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]

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

this.getDataValue('deadline')

to get the underlying data value