javascript / intermediate
Snippet
Gruppieren kategorisierter Elemente im React-State mit Object.groupBy
Die native statische Methode `Object.groupBy()` strukturiert iterierbare Daten anhand von Callback-Rückgabewerten in Objekte um. In React-Komponenten ersetzt dies unhandliche `reduce`-Konstrukte beim Aufbereiten flacher Arrays für gruppierte Ansichten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function InventoryDashboard({ rawInventory = [] }) {const [inventoryList] = React.useState(rawInventory);// Group items by category string using the standard Object.groupBy APIconst 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>);}
react
Erklärung
1
const groupedByCategory = Object.groupBy(
Führt die standardisierte ES2024-Gruppierungsmethode direkt auf dem State-Array aus.
2
(item) => item.department ?? 'Unassigned'
Ermittelt den Gruppenschlüssel und fängt fehlende Kategorien mittels Nullish-Coalescing ab.
3
{Object.entries(groupedByCategory).map(([department, items]) => (
Wandelt das gruppierte Objekt in Schlüssel-Wert-Paare um, um verschachteltes JSX zu rendern.