How to render and item once In a map function ? I have and array of objects and I want to render the color value only once into another component , I tried to push the color in to an array and checked against it but since it is inside the loop it is getting added instantly,and this check will fail, the point is I don’t want the same color to be rendered twice, if found then only once… any good solution for this case ?
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}`
);
})
})I'd suggest you first sort your items by color and then only render the color component when the color differs from the previous item:
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} />
</>
)
})
Edit: As index is an integer >= 0, !index will evaluate to true exactly when index === 0 does.