Rendering with map I have a double arrow function returning components and I get a missing display name error
Here is the code
const Sales = (props: Props) => {
const renderCard = React.useMemo(
() => (config) => (card, i) => {
return (
<div {...config} key={i}>
<Card Icon={card.Icon} label={card.label} />
</div>
);
},
[cards]
);
return (
<div title="Sales">
<div>
{cards.slice(0, 3).map(renderCard(configOne))}
</div>
{/* other stuff */}
<div>
{cards.slice(3).map(renderCard(configTwo))}
</div>
</div>
);
};
I found the solution, I can convert the last function from an arrow to a named function like this
const renderCard = React.useMemo(
() => (config) =>
function ICard(card, i) {
return (
<div {...config} key={i}>
<Card Icon={card.Icon} label={card.label} />
</div>
);
},
[cards]
);
I hope this helps someone else too