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
How to break a loop inside inline if in next js

I would like to stop the loop inside bedsAssign.map if row.id is not equal to u.tenant_id but putting break; doesn't work.

{tenants.map((row) =>
                 bedsAssign.map(
                   (u) =>
                     row.id !== u.tenant_id && (
                       <MenuItem key={row.id} value={row.id}>
                         {row.fullName}
                       </MenuItem>
                        break; --> not working
                     )
                 )
               )}
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

You can add filter before map to remove all bedsAssign items which are not matched with current row.id

{
  tenants.map((row) =>
    bedsAssign
      .filter((u) => row.id !== u.tenant_id)
      .map((u) => (
        <MenuItem key={row.id} value={row.id}>
          {row.fullName}
        </MenuItem>
      ))
  )
}

If you want to break the loop, you can try to use some or find with a proper return for map

{
  tenants.map((row) => {
    const isAssigned = bedsAssign.some((u) => row.id !== u.tenant_id)
        return isAssigned ? (<MenuItem key={row.id} value={row.id}>
          {row.fullName}
        </MenuItem>) : null    
  })
}
about 4 years ago · Juan Pablo Isaza Report

0

You can not break any array methods like forEach, filter, map etc. If you encounter a scenario where you want your loop to break then you should use traditional for loop.

about 4 years ago · Juan Pablo Isaza Report

0

use a filter instead of map for bedsAssign:


{tenants.map((row) =>
                 bedsAssign.filter(
                   (u) =>
                     row.id !== u.tenant_id && (
                       <MenuItem key={row.id} value={row.id}>
                         {row.fullName}
                       </MenuItem>
                     )
                 )
               )}

the filter is going to only fill in the items that are meeting the condition you want.

EDIT: I noticed that you want to break once condition is met, this would work in this case:

{tenants.map((row) =>
                 for(let i of bedsAssign){
                     if(row.id !== i.tenant_id && (
                       <MenuItem key={row.id} value={row.id}>
                         {row.fullName}
                       </MenuItem>
                     )){
                         break
}
}
                 )
               )}
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!