Display a <div> only once while looping and displaying other data in a loop

Question

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>

);

Answer 1

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>
));