React array map inside map 值不渲染

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

You can do more easily if use Set constructor

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

Answer 5

 {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>