Getting unrelated (react/no-this-in-sfc) violation error

[psonawane-servicetitan]

I ran the following simple js program. But I got an error at line this.getA(); which is totally unrelated here. The error said "stateless functional components should not use this (react/no-this-in-sfc)"

class Demo {
    getA = () => 'a';

    hasBug = () => {
        this.getA();

        return null;
    };
}

What did you expect to happen?
No error expected

What actually happened? Please include the actual, raw output from ESLint.
Got this error - stateless functional components should not use this (react/no-this-in-sfc) for line this.getA()

[ljharb]

Component detection is probably recognizing it as an SFC since it returns null; this seems like a case where we should have less confidence because a) it's named not in PascalCase, b) it's a class field.

cc @alexzherdev

[alexzherdev]

We're bitten again by the fact that Components.get can return something we're not entirely sure is a component (confidence = 1).
I can make a local fix in this rule to make sure this doesn't happen. But making Components.get always require confidence of 2 breaks 37 different tests in the suite 😕

[ljharb]

@alexzherdev in this case it should be reporting a lower confidence than 1, because it's a class field, and because it's not named in PascalCase.

[bendtherules]

Not sure if this is due to the same reason.

Another sample causing unnecessary error:

import React from 'react';

class Extended extends Base {
  testA = () => {
    this.abc(); // Error here - react/no-this-in-sfc

    return (
      <div>
        Hello World
      </div>
    );
  }

  testB() {
    this.abc(); // No error here

    return (
      <div>
        Hello World
      </div>
    );
  }
}

It doesn't happen inside non-arrow functions