Master Table of Contents

• See full index in [01. Introduction]

Who this chapter is for

• Learners who already write React components and want cleaner data logic
• Beginners who often get stuck when shaping API data for UI
• Anyone who wants less “quick fixes” and more predictable data flow

What you’ll learn

• When to use map, filter, reduce, and find without guessing
• How to update arrays/objects immutably (the React-safe way)
• How to shape raw data into UI-ready and API-friendly structures

Why this topic matters

Most frontend work is not “building buttons.” It is transforming data cleanly. If your data handling is messy, your UI logic becomes fragile fast.

When this skill is solid, React feels much easier because your components receive cleaner, predictable data.

Core concepts

Array methods

• map: transform items
• filter: keep matching items
• reduce: aggregate values
• find: get first match

Quick practical rule:

• Use map when output length is usually same.
• Use filter when you are removing items.
• Use reduce when you need one final result (sum/object/group).
• Use find when you only need the first match.

Immutable updates

Use spread syntax for safe updates instead of mutating original state.

Why this matters in React:

• React relies on reference changes to detect updates.
• Mutating original data can cause UI not updating as expected.

Step-by-step walkthrough

Step 1 — Start with small datasets

Practice with tiny arrays first (users, products, tasks) so transformation intent is clear.

Step 2 — Compose methods

Chain filter + map only when it stays readable. If it gets long, break it into named steps.

Step 3 — Prepare UI-friendly objects

Build final objects that are ready for rendering (no extra transformation in JSX).

Target in this chapter: keep data logic outside UI markup as much as possible.

Practical examples

Example 1 — Grade average

const scores = [80, 90, 75, 95];
const average = scores.reduce((sum, value) => sum + value, 0) / scores.length;
console.log(average);

Expected output:

85

Example 2 — Immutable object update

const user = { name: "Sinta", city: "Jakarta" };
const updatedUser = { ...user, city: "Bandung" };

Real case:

• This pattern shows up constantly in React state updates.

Common mistakes and how to avoid them

• Mutating arrays/objects directly -> always return new arrays/objects
• Overusing reduce for simple transforms -> prefer map/filter when clearer
• Writing long unreadable chains -> use helper variables with meaningful names
• Transforming data inside JSX repeatedly -> precompute data before rendering

Mini Project

• Build a student grade analyzer with:
• average score,
• ranking,
• pass/fail filtering,
• one “top performer” card.

Bonus:

• Add grouped output by grade category (A, B, C, etc.).

Quick practice

• Transform user data to card-ready objects
• Compute average, min, max from score arrays
• Implement one immutable update for nested object data
• Explain in one sentence: when is reduce the right choice?

Key takeaways

• Data transformation is one of the highest-value frontend skills
• Immutable updates are non-negotiable for predictable React behavior
• Cleaner data pipelines make components simpler and debugging faster

Next step

Continue to [06. Modern JavaScript Syntax and Modules].