Custom classes being evaluated as React components

[EvHaus]

After upgrading to 3.7.1, the following code is being evaluated as a React component and failing the react/display-name rule:

class NotAComponent extends MyCustomClass {
    get () {

    }
}

[aryzle]

Display-name rule should only be a warning anyway, right? My testing code is failing when rendering this component

export class Form extends Component {                                           
    render () {
        ...
    }
}

At the bottom of the file I have export default CreateTeamForm;

[yannickcr]

A class is detected as a React component if

• it extends React.Component, Component
• or if one of its method returns a React Element (with JSX or React.createElement).

Maybe restricting this second rule to the methods named render would solve your problem.

Display-name rule should only be a warning anyway, right?

Could be an error or a waning, it depends how you have configured the rule in ESLint. But I think you should enable the acceptTranspilerName option. This way Form will be accepted as the component displayName.

[EvHaus]

@yannickcr Please change the second rule to require a render method which returns an element to exist. That should resolve this issue.

[aryzle]

acceptTranspilerName is set to true, this is the test code that breaks it btw:

return TestUtils.renderIntoDocument(
    <Provider store={store}>                                            
        {() => <CreateTeamForm {...props} />}                           
    </Provider>
);

[EvHaus]

Actually, looking into this closer. You don't even need a render() method for this rule to throw a false positive. The following code also warns about a missing displayName:

// Throws false positive warning for react/display-name
class Test extends Something {
    test = () => {

    }
}

However, removing the arrow function does NOT:

// Doesn't throw false positive warning for react/display-name
class Test extends Something {
    test () {

    }
}

[taion]

This also triggers for arrow functions declared in static class properties, such as for Relay mutations. Against 3.7.1, the following is detected as a React component and incorrectly triggers relevant ESLint rules:

import Relay from 'react-relay';

export default class WidgetMutation extends Relay.Mutation {
  static fragments = {
    widget: () => Relay.QL`
      fragment on Widget {
        id
      }
    `
  };

  getMutation() {
    return Relay.QL`mutation { widget }`;
  }

  getFatQuery() {
    return Relay.QL`
      fragment on WidgetPayload {
        widget
      }
    `;
  }

  getConfigs() {
    return [{
      type: 'FIELDS_CHANGE',
      fieldIDs: {
        widget: this.props.widget.id
      }
    }];
  }

  getVariables() {
    const {widget, ...props} = this.props;
    const {id} = widget;
    return {id, ...props};
  }
}

It is not detected as such against 3.6.3.

[yannickcr]

Seems to be a duplicate of #291