javascript / intermediate
Snippet
Kategorisieren von React-Listenelementen mit Object.groupBy
Modernes ECMAScript bietet Object.groupBy als natives Hilfsmittel, um ein Array von Objekten anhand eines Kriteriums in gruppierte Dictionary-Einträge zu unterteilen, ohne benutzerdefinierte reduce-Funktionen zu benötigen. In React-Render-Pipelines vereinfacht dies die strukturierte Darstellung kategorisierter Listen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from 'react';export function TaskListGrouped({ tasks }) {const groupedTasks = Object.groupBy(tasks, ({ priority }) => priority);return (<section>{Object.entries(groupedTasks).map(([priorityLevel, items]) => (<div key={priorityLevel} className="priority-group"><h3>Priority: {priorityLevel.toUpperCase()}</h3><ul>{items.map((task) => (<li key={task.id}>{task.title}</li>))}</ul></div>))}</section>);}
react
Erklärung
1
const groupedTasks = Object.groupBy(tasks, ({ priority }) => priority);
Unterteilt das flache Array in ein Dictionary-Objekt, geordnet nach dem extrahierten priority-Wert.
2
Object.entries(groupedTasks).map(([priorityLevel, items]) => (
Wandelt das gruppierte Dictionary in Schlüssel-Wert-Tupel zur Iteration in JSX um.
3
<div key={priorityLevel} className="priority-group">
Weist React einen stabilen Key anhand der extrahierten Kategoriebezeichnung zu.
4
{items.map((task) => (
Iteriert über das unterteilte Unter-Array von Elementen der jeweiligen Kategorie.