Component Definition is Missing Display Name in React

In this article, we will discuss what causes the “Component definition is missing display name” error and how to fix it.

What causes the “Component Definition is Missing Display Name” error in React?

This error is caused by a missing displayName property on the component definition. The displayName property is used by React to display a name for the component in the React DevTools.

If you forget to add the displayName property, React will still render your component, but the DevTools will show it as Unknown.

How to fix the “Component Definition is Missing Display Name” error in React?

To fix this, add a displayName property to your component definition with a string value.

const App = () => {
  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
};

// ️ set display name
App.displayName = "MyComponent";

export default App;

With the displayName property in place, the DevTools will now show your component as MyComponent.

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

// eslint-disable-next-line react/display-name
const App = () => {
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
};

export default App;

The comment will disable the ESlint rule for a single line.

If you want to disable react/display-name rule for the entire project, add "react/display-name" property to the rules object of your .eslintrc.js file.

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

You can also disable the rule for a specific file, add the /* eslint-disable react/display-name */ comment at the top of the file.

/* eslint-disable react/display-name */

const App = () => {
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
};

export default App;

Conclusion

The Component Definition is Missing Display Name Error in React occurs when the React component is defined without a display name. You can fix it by adding the displayName property or disabling ESLint rules.

Learn More:

• Check if an Element is Focused in React
• Open a Link in a New Tab in React
• Handle Double Click Events in React
• Pass a Component as Props in React
• Detect the Browser in React
• Check if a Checkbox is Checked in React
• Format a Number with Commas in React
• Capitalize First Letter of a String in React
• The useState set Method Not Reflecting a Change Immediately