how to render a certain item once in jsx using map?

Question

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'

Answer 1

const itemColors = items
  .map(({ color }) => color) // create array of colors
  .filter((value, index, self) => self.indexOf(value) === index) // remove duplicates

// do your rendering here

Or using lodash

Answer 2

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

Answer 3

So You will need to filter the color value first and make an array of no duplicate color. Then you need to render the cars name by filtering by the color. The simple approach without any third party library will be like this:

const colors = items
   .map((data) => data.color)
   .filter((v, i, s) => s.indexOf(v) === i) 

{colors.map((color) => (
    <div>
        {color}
        {items.filter(item => item.color === color).map((item)=> (
            <>{item.car}</>
        )}
    </div>
)}