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,
const columns_payment_summary_table_render = text => (<span>{getCountForCountry(text)}</span>);
const columns_payment_summary_table = [{
title: SettlementConstants.LABEL_QUANTITY_SELECTED,
dataIndex: "group",
key: "group",
// eslint-disable-next-line react/display-name
render: columns_payment_summary_table_render
}];
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>
},
}
]