Tengo una lista de matriz de objetos y esta lista de matriz incluye valores duplicados. Entonces necesito representar solo valores únicos. Pero no está funcionando.
{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> ))}En Render, el mapa funciona solo para el mapa exterior. Por lo tanto, el mapa interno no se renderiza. No debe usar el mapa interno.
Recomiendo usar el método de filtro. Como esto
row.products.filter(*condition*).map(()=>{ return <div></div> )Debe devolver su valor devuelto "pp" correctamente.
Por ejemplo:
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) ) }) }){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> ))}