close

[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?

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

    To Solve Component definition is missing displayName (react/display-name) Error 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. Add // eslint-disable-next-line react/display-name this line at the top of your Component and your error will be solved. Thank you.

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

    To Solve Component definition is missing displayName (react/display-name) Error 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 add MyApp.displayName = ‘MyApp’; before you, export default. Now, your error will be solved.

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

Leave a Comment