How to break a loop inside inline if in next js

Question

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

Does this answer your question? [Break statement in javascript array map method](https://stackoverflow.com/questions/12260529/break-statement-in-javascript-array-map-method) — sergdenisov, Jun 01 '22 at 08:37
Arrays methods are not interruptible. You can skip a single iteration with `return`. You can filter out what you don't want before the map though. — julianobrasil, Jun 01 '22 at 08:40

Nick Vu · Accepted Answer · 2022-06-01T11:18:16.927

3

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

edited Jun 01 '22 at 11:18

answered Jun 01 '22 at 08:37

Nick Vu

14,512
4
21
31

This almost work. After the loop filters the item, it gives me the result I need, but the loop began to loop again and the next item that it filtered doesn't give me correct result. So I need something to stop the loop once the condition is met. If it's possible – John Michael Vicmudo Jun 01 '22 at 08:54
So you mean you only filter it once and the next loop should not filter anything? @JohnMichaelVicmudo – Nick Vu Jun 01 '22 at 09:55
The loop should stop once the condition is met. – John Michael Vicmudo Jun 01 '22 at 10:47
For a better understanding of what I'm trying to show. I'm making a boarding house system. Each tenant can only be assigned in 1 bed. And what I'm trying to show here is all the tenant that is available and wasn't assigned to any bed. To know if the tenant is assigned or not, I used u.tenant_id as a foreign key in the condition of my code. – John Michael Vicmudo Jun 01 '22 at 10:52

score 0 · Answer 2 · answered Jun 01 '22 at 09:12

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.

answered Jun 01 '22 at 09:12

Ubaid Hussain

72
9

Ghazi · Answer 3 · 2022-06-01T09:39:20.647

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

I'm having an error when using for loop. The function is inside the render ( {loop function} ) — John Michael Vicmudo, Jun 01 '22 at 10:53

How to break a loop inside inline if in next js

3 Answers3