¿Cómo representar un elemento una vez en una función de mapa? Tengo una matriz de objetos y quiero representar el valor del color solo una vez en otro componente, traté de insertar el color en una matriz y lo verifiqué, pero como está dentro del ciclo, se agrega instantáneamente, y esta verificación fallará, el punto es que no quiero que el mismo color se reproduzca dos veces, si se encuentra, solo una vez ... ¿alguna buena solución para este caso?
const items =[{car : 'bmw', color : 'black'}, {car: 'opel', color :'black'}, {car:'landrover',color:'red'}] {items.map((item, i) => { let arr = []; //arr.push(items[i].color); return ( <React.Fragment> {arr.includes(items[i]) ? undefined : <colors img={items[i]?.color} /> } <items key={item.id} Car={item.car} /> </React.Fragment> ); })} // Expected result // black color component // 'bmw' // 'opel' // red color component // 'landrover' const items =[ {car : 'bmw', color : 'black'}, {car: 'opel', color :'black'}, {car:'landrover',color:'red'} ] //Expected Outcome /* [ { color: 'black' cars: ['bmw','opel'] }, { color: 'black' cars: ['bmw','opel'] } ] */ const finalResult = items.reduce((acc, cur, arr) => { let res = [...acc]; const matchIndex = res.findIndex(obj => obj.color === cur.color); if (matchIndex === -1) { res.push({ color: cur.color, cars: [cur.car] }) } else { res[matchIndex].cars.push(cur.car) } acc = res; return acc; }, [] ) console.log(finalResult); finalResult.forEach(colorObject => { colorObject.cars.forEach(car => { console.log( `Your Component with Color ${colorObject.color} and Car ${car}` ); }) })Le sugiero que primero clasifique sus elementos por color y luego solo represente el componente de color cuando el color difiera del elemento anterior:
items .sort((a, b) => a.color.localeCompare(b.color)) .map((item, index, sortedItems) => { const colorChanged = !index || item.color !== sortedItems[index - 1].color return ( <> { colorChanged && <colors img={items[i]?.color} /> } <items key={item.id} Car={item.car} /> </> ) }) Editar: Como index es un número entero >= 0, !index se evaluará como verdadero exactamente cuando index === 0 lo hace.