How to group components by parameter?

Question

React

Hello! Faced such a problem, there is an object "number", I iterate over it using map

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

it is necessary to make a grouping by the "storey" field, I broke my whole head, how can I implement this?

Answer 1

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