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'

It seems like your problem is with having duplicate item in the array. If so, does this answer help? https://stackoverflow.com/q/9229645/4592937 — Connor Mooneyhan, Feb 04 '22 at 14:32

score 1 · Answer 1 · answered Feb 04 '22 at 14:30

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

answered Feb 04 '22 at 14:30

Matthew Kwong

2,548
2
11
22

I still need to render items acording to that array – Richardson Feb 04 '22 at 14:34
OK, so you just modified your question and that makes things a bit different. You are not trying to remove duplicates, you are trying to group the array by `color`. In that case, you either write a `groupBy` function on your own or find one from a utility library like `lodash` that has `groupBy` – Matthew Kwong Feb 04 '22 at 14:37

M Shahzeb Raza · Answer 2 · 2022-02-04T15:15:34.187

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

the loop is kinda complicated there are also items to be rendered imagine if the car object has other elements like year and i want to render color and years under it — Richardson, Feb 04 '22 at 14:41

score 1 · Accepted Answer · answered Feb 04 '22 at 14:40

1

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.

answered Feb 04 '22 at 14:40

Marces Engel

685
6
6

I don't want to mess with sorting but your answer is really close to want i want i am going to give it a try – Richardson Feb 04 '22 at 14:50
1

If you can be sure that the cars with the same color always come in blocks (one after another) you can skip the sorting part :) – Marces Engel Feb 04 '22 at 14:52
they should be coming in blocks – Richardson Feb 04 '22 at 15:00

score 0 · Answer 4 · answered Feb 04 '22 at 14:47

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

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

4 Answers4