javascript / intermediate
Snippet
Categorizing React List Items with Object.groupBy
Modern ECMAScript provides Object.groupBy as a native utility to partition an array of objects into keyed dictionary buckets without requiring custom reduce functions. In React render pipelines, this simplifies mapping structured array datasets into categorized sections while preserving clear object datatypes.
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
Breakdown
1
const groupedTasks = Object.groupBy(tasks, ({ priority }) => priority);
Splits the flat array into a dictionary object keyed by the extracted priority property value.
2
Object.entries(groupedTasks).map(([priorityLevel, items]) => (
Transforms the grouped dictionary into key-value tuples for iteration inside JSX.
3
<div key={priorityLevel} className="priority-group">
Applies a stable React key using the extracted grouping category string.
4
{items.map((task) => (
Iterates over the partitioned sub-array of items belonging to the active category.