Fix - Component definition is missing display name in React

avatar

Borislav Hadzhiev

Sat Apr 30 20221 min read

banner

Photo by João Ferrão

Fix - Component definition is missing display name in React #

Set the displayName property on the component to fix the "Component definition is missing display name" error, e.g. App.displayName = 'MyApp';. Alternatively, disable the ESLint rule for a line with the following comment - // eslint-disable-next-line react/display-name.

App.js
const App = () => { return ( <div> <h2>Hello world</h2> </div> ); }; // 👇️ set display name App.displayName = 'MyApp'; export default App;

The error is often caused when using forwardRefs in React.

The displayName property is used to give a descriptive name to components for the React devtools extension.

react displayname devtools

Alternatively, you can disable the ESlint rule for a single line by placing a comment right above where the ESlint error occurs.

App.js
// eslint-disable-next-line react/display-name const App = () => { return ( <div> <h2>Hello world</h2> </div> ); }; export default App;

The comment will disable the rule for a single line.

Alternatively, you can disable the react/display-name rule for your entire project by adding the property to the rules object of your .eslintrc.js file.

.eslintrc.js
module.exports = { rules: { "react/display-name": "off", } }

You can also disable the rule for a single file by adding the following comment at the top of your file.

App.js
/* eslint-disable react/display-name */ // ... your code here
Use the search field on my Home Page to filter through my more than 1,000 articles.