close

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

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error ESLint: Component definition is missing displayName (react/display-name) in reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

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

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

    To Solve ESLint: Component definition is missing displayName (react/display-name) Error You can either put the render prop directly into your jsx implementation of the  component, or shut down the ESLint's error by doing.

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

    To Solve ESLint: Component definition is missing displayName (react/display-name) Error You can either put the render prop directly into your jsx implementation of the  component, or shut down the ESLint's error by doing.

Solution 1

You can either put the render prop directly into your jsx implementation of the <Column> component, or shut down the ESLint’s error by doing this :

const columns_payment_summary_table = [ 
    {
        title: SettlementConstants.LABEL_QUANTITY_SELECTED,
        dataIndex: 'group',
        key: 'group',
        // eslint-disable-next-line react/display-name
        render: text => (
            <span>{getCountForCountry(text)}</span>
        ),
    }
]

Solution 2

Using a normal function for the render the key will also remove the ESLint warning without any need for disabling the warning.

const columns_payment_summary_table = [ 
    {
        title: SettlementConstants.LABEL_QUANTITY_SELECTED,
        dataIndex: 'group',
        key: 'group',
        render: function countForCountry(text) {
            return <span>{getCountForCountry(text)}</span>
        },
    }
]

Solution 3

Sometimes we can bypass rules if we have an error in only one or two places. What if we have the same use case in multiple places. Each time We have to disable rules.

Instead, we can bypass this error by assigning the function to render property.

const getMyHTML = (text) => <span>{getCountForCountry(text)}</span>

const columns_payment_summary_table = [
  {
    title: SettlementConstants.LABEL_QUANTITY_SELECTED,
    dataIndex: 'group',
    key: 'group',
    render: getMyHTML,
  }
]

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment