[Solved] Component definition is missing displayName (react/display-name)

Hello Guys. How are you? Hope You are fine Today I am facing the following error in my react app: Component definition is missing displayName (react/display-name) in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Let’s Get Start with This Article.

How Component definition is missing displayName (react/display-name) Error Occurs?

I am facing the following error in my react app.

Component definition is missing displayName (react/display-name)

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Component definition is missing displayName (react/display-name) Error?

Solution 1: Disable the react/display-name

You can also Disable the react/display-name rule for your Project. First of all Open Your .eslintrc.js file and add this rules property Just like below.

module.exports = {
  rules: {

    ....
    "react/display-name": "off",
  }
 }

And Now, You Don’t have to define DisplayName Or Anything Else In Each of Your Files Just Add the Rule in .eslintrc.js and Now, Your error will be solved.

Solution 2: Set displayName

You haven’t settled displayName that’s why this error occurs Just set displayName property on the component to solve the Component definition is missing displayName (react/display-name) error. Just like this.

const MyApp = () => {
  return (

   <>
    <div>
      <h1>Hello world</h1>
    </div>

  </>
  );
};

MyApp.displayName = 'MyApp';

export default MyApp;

Just add MyApp.displayName = ‘MyApp’; before you, export default. Now, your error will be solved.

Solution 3: disable the ESlint rule

If You don’t want to add displayname then You can disable the ESlint rule. You just have to add this one-line comment right above your component. Just like this.

// eslint-disable-next-line react/display-name

const MyApp = () => {
  return (

   <>
    <div>
      <h1>Hello world</h1>
    </div>

  </>
  );
};

export default MyApp;

Add // eslint-disable-next-line react/display-name this line at the top of your Component and your error will be solved. Thank you.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Maximum update depth exceeded. This can happen when a component repeatedly calls
• Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from
• VS Code ‘!’ or exclamation mark HTML autocomplete not working
• Install for create-react-app latest failed with code 1
• Functions are not valid as a React child. This may happen if you return a Component instead of Component from render