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

ESLint thinks you are defining a new component without setting any name to it.

This is explained because ESLint cannot recognize the render prop pattern because you are not directly writing this render prop into a component, but into an object.

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>        ),    }]

I hope it helped ;)

Using a normal function for the render 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>        },    }]

If anyone needs to avoid this in all the files, add below to the rules section of .eslintrc.js file,

{  ...  "rules": {    "react/display-name": "off"  }}