React array map inside map value not rendering

Question

I have an object Array list and this array list includes duplicate values. So I need to render only unique values. But it's not working.

{promotions.map((row) => (
  <div>
    <h1>{row.name}</h1>  //This is working
    {row.products.map(() => {
      const pp = row.products.filter( (ele, ind) => ind === row.products.findIndex( elem => elem.productId === ele.productId))

      pp.map((data)=>{
        return(
          <Chip
            key={`${row.productId}_${data.productId}`}
            classes={{ root: classes.productsChipRoot }}
            label={data.productName}
            style={{ margin: 3, backgroundColor: '#BBD7FB' }}
          /> 
        )
      })
    })}
  </div>
))}

You need to return the result of pp.map. E.g.: return pp.map(... And potentially also flatten the result of your first map call. E.g. row.products.map(...).flat() — Cully
– Cully, Commented Feb 8, 2022 at 6:25

Ihor Konovalenko · Accepted Answer · 2022-02-09 09:57:16Z

3

In Render, Map works for just outter map. So, the Inner map is not render. You should not use the inner map.

I recommend using filter method. Like this

row.products.filter(*condition*).map(()=>{
      return <div></div>
)

edited Feb 9, 2022 at 9:57

Ihor Konovalenko

1,4172 gold badges19 silver badges24 bronze badges

answered Feb 8, 2022 at 6:35

KaganBerk

1101 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KaganBerk Over a year ago

You’re welcome :D

Step · Accepted Answer · 2022-02-08 06:35:13Z

1

You need to return your "pp" returned value correctly.

For example:

let firstArray = [{
  id: 1,
  name: "asd"
}, {
  id: 2,
  name: "fgh"
}];
let secondArray = [{
  id: 1,
  name: "hjk"
}, {
  id: 2,
  name: "zxc"
}];

firstArray.map(() => {
  const pp = firstArray.filter((ele, ind) => ind === firstArray.findIndex(elem => elem.id === 2))

  return pp.map((data) => {
    return (
      console.log(data)
    )
  })
})

answered Feb 8, 2022 at 6:35

Step

1494 silver badges17 bronze badges

Comments

Ali Pakbaz · Accepted Answer · 2022-02-08 06:30:20Z

0

{promotions.map((row) => (
      <div>
        <h1>{row.name}</h1>  //This is working
        {row.products.map(() => {
          const pp = row.products.filter( (ele, ind) => ind === row.products.findIndex( elem => elem.productId === ele.productId))
    
          return pp.map((data)=>{
            return(
              <Chip
                key={`${row.productId}_${data.productId}`}
                classes={{ root: classes.productsChipRoot }}
                label={data.productName}
                style={{ margin: 3, backgroundColor: '#BBD7FB' }}
              /> 
            )
          })
        })}
      </div>
    ))}

answered Feb 8, 2022 at 6:30

Ali Pakbaz

613 bronze badges

Comments

someone · Accepted Answer · 2022-02-08 06:31:40Z

0

You can do more easily if use Set constructor

let array = ['A', 'B', 'A', 'C', 'B'];
let uniqArray= [...new Set(array )];

console.log(uniqArray);

answered Feb 8, 2022 at 6:31

someone

6931 gold badge6 silver badges26 bronze badges

1 Comment

Cully Over a year ago

This doesn't answer the question. The problem is that the results aren't rendering, not that they aren't unique. Also, Set() on an array of objects will not remove any duplicates because all of the objects are unique.

Paresh Solanki · Accepted Answer · 2022-02-08 06:31:34Z

-1

 {promotions.map((row) => (
    <dev>
       <h1>{row.name}</h1>  //This is working
{row.products.map(() => {
          let tmpArray = []
          row.products.map(pro => {
             if(tmpArray.filter(p => p.productId === pro.productId).length === 0){
                tmpArray.push(pro)
             }
          })
  
          tmpArray.map((data)=>{
           return(
                            <Chip
                              key={`${row.productId}_${data.productId}`}
                              classes={{ root: classes.productsChipRoot }}
                              label={data.productName}
                              style={{ margin: 3, backgroundColor: '#BBD7FB' }}
                            /> 
                             
                          )
                        })
                      })}
   </div>

answered Feb 8, 2022 at 6:31

Paresh Solanki

191 bronze badge

2 Comments

Cully Over a year ago

This won't work. It has the same problem as the code in the question. Also, there's no need to nest a filter inside a map. Filter should work on its own.

Paresh Solanki Over a year ago

Can you please provide your sample array?

Collectives™ on Stack Overflow

React array map inside map value not rendering

5 Answers 5

1 Comment

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related