Eslint-plugin-react: "missing display name" when using React.createClass

[fedemp]

Hello people. I'm having trouble linting some old code from a project that triggers the "Component definition is missing display name (react/display-name)" warning.

Minimal example:

import React from "react";

const component = React.createClass({
    displayName: "MyComponent",
    render: function() {
        return (<div>Hello</div>);
    }
});

export default component;

Used .eslintrc

{
    "parserOptions": {
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },

    "env": {
        "es6": true
    },

    "plugins": [
        "react",
    ],

    "rules": {
        "react/display-name": [2],
    }
}

[jseminck]

I think you have to use the following setting, because of using the old syntax. I'm not sure if this is properly documented anywhere, as I derived the setting from the code / unit-tests. 😄

    settings: {
      react: {
        createClass: 'createClass'
      }
    }

Additionally, you probably also need to configure with ignoreTranspilerName to true:

"react/display-name": [<enabled>, { "ignoreTranspilerName": true }]

[ljharb]

The latter isn't necessary here; just the createClass pragma.

[fedemp]

@jseminck Your suggestion actually worked. Only needed the settings part. Closing then. :)

[salemhilal]

For people in the future, I ran into this same issue, and adding createClass: 'createClass' to settings.react did the trick.