React array map inside map value not rendering Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of React array map inside map value not rendering without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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 )

We are here to answer your question about React array map inside map value not rendering - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji