React ESLint (react/display-name) Not Working

user_13679260 0
Viewed 1156

I was wondering if eslint rules for react (react/display-name) is working for anyone?

Currently, on my code, it doesn't show any warning if I do not put the displayName. I am expecting if I don't put displayName it will throw an eslint warning message.

e.g.

Component.jsx

import React from 'react';

const Component = () => {
 return (
  <h1>Hello World</h1>
 );
};

export default Component;

.eslintrc

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

I am expecting there should be a lint warn, but nothing came up.

Is there any configuration that I have missed?

eslint-config-airbnb eslintrc eslint reactjs
1 Answers

This rule will only show an error if your component doesn't have a name. In your case your component's name is Component. This is because react automatically transpiles the name of the component.

If you don't want the name to be transpiled automatically, you need to disable the transpiled Name with "react/display-name": [2, { "ignoreTranspilerName": true }],. Then you will get the behavior that you expect.

The rule that you have currently configured will throw an error if your component would look like this:

const Hello = createReactClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
module.exports = Hello;
user_118640120
Related