Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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>

);
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>
));
about 4 years ago · Juan Pablo Isaza Report

0

const listItems = numbers.map((number, index) =>

  • {number.imageUrl &&

    {

    index === 0 && suggestions

    }

    {number.imageUrl}

    }

    number.text
  • );

    about 4 years ago · Juan Pablo Isaza Report
    Answer question
    Find remote jobs

    Discover the new way to find a job!

    Top jobs
    Top job categories
    Business
    Post vacancy Pricing Sales
    Legal
    Terms and conditions Privacy policy
    © 2026 PeakU Inc. All Rights Reserved.
    Andres GPT
    Show me some job opportunities
    There's an error!