Как сгруппировать компоненты по параметру?

Question

[JordanBelford]

Здравствуйте! Столкнулся с такой проблемой, есть объект "номер", перебираю его с помощью map

const numbers = props.mainPage.room.map(item => 
<NumberRoom key={item.id} number={item.number} storey={item.storey} state={item.state}/>);

нужно сделать группировку по полю "storey", всю голову себе сломал, как можно это реализовать?

Answer 1

[0xD34F]

const grouped = props.mainPage.room.reduce((acc, n) => (
  (acc[n.storey] ??= []).push(n),
  acc
), {});

{Object.entries(grouped).map(([ groupName, group ]) => (
  <div className="group" key={groupName}>
    <h3>{groupName}</h3>
    {group.map(n => <NumberRoom key={n.id} {...n} />)}
  </div>
))}

Comments

[JordanBelford]

В коде ошибка, а может я что - то не то делаю)

[0xD34F]

JordanBelford, а если заменить (acc[n.storey] ??= []).push(n) на (acc[n.storey] = acc[n.storey] || []).push(n)?

[JordanBelford]

Спасибо, все помогло