Grouping Categorized Items in React State with Object.groupBy

function InventoryDashboard({ rawInventory = [] }) {
  const [inventoryList] = React.useState(rawInventory);
 
  // Group items by category string using the standard Object.groupBy API
  const groupedByCategory = Object.groupBy(
    inventoryList,
    (item) => item.department ?? 'Unassigned'
  );
 
  return (
    <section>
      <h2>Department Inventory</h2>
      {Object.entries(groupedByCategory).map(([department, items]) => (
        <div key={department}>
          <h3>{department} ({items.length})</h3>
          <ul>
            {items.map((item) => (
              <li key={item.id}>{item.name} - ${item.price}</li>
            ))}
          </ul>
        </div>
      ))}
    </section>
  );
}