I have a use case where am displaying options with the help of a loop.
I need to display the text suggestions only once for the entire loop cycle. The code block number.imageUrl may repeat but the suggestions text should be displayed only once.
const listItems = numbers.map((number) =>
<li>
{number.imageUrl &&
<div>suggestions</div>
<div>{number.imageUrl}</div>
}
<div>number.text</div>
</li>
);
Like Justinas said, either move <div>suggestions</div> out of the map function, or do this:
const listItems = numbers.map((number, index) => (
<li>
{index === 0 && <div>suggestions</div>}
{number.imageUrl && <div>{number.imageUrl}</div>}
<div>{number.text}</div>
</li>
));
const listItems = numbers.map((number, index) =>
{number.imageUrl &&
{
index === 0 && suggestions
}
{number.imageUrl}}
number.text);