Component detection fails for certain rules when using this within a stateless function

[chrisronline]

This took me awhile of digging around to figure this out.

Here is a mockup of something we had in our React components:

import React from 'react';

const onClick = () => {};
const MyComponent = ({ myVar }) => {
  return (
    <button onClick={onClick.bind(this)}>{myVar}</button>
  );
};

MyComponent.propTypes = {};

With this rule configured ('react/prop-types': [2],), eslint failed to find anything wrong with this code. However, it should be erroring because myVar is a prop that isn't defined in .propTypes

I dug into the source code and figured out what's going on. The fix is to remove the .bind(this) and change it to anything other than this.

The root cause is this logic which affects all attempts to list this component with a confidence level >= 2

Obviously, the this usage is an oversight and can be easily addressed but it's worrisome that the linter is potentially skipping certain rules because of it.

Any insight or thoughts?

[yannickcr]

Yeah, functional components detection is pretty tricky so we have different strategies to detect them, and it can happen that some of them are unfortunately ignored.

I'll try to be less restrictive on the this keyword usage in functional components.