Why does 'users.map is not a function' happen in React?

When the API returns a wrapper object, .map crashes and the page renders blank. Return the array so it reaches state - in a live cloud workspace. Build it free on HeyDevJob in a live cloud workspace.

Fullstack EngineerJuniorreactjavascriptdebugging

Fix a Blank React Dashboard (users.map is not a function)

A real fullstack problem you debug end to end in a live cloud workspace, then show on your portfolio. No tutorial, no toy app - a broken system that behaves like production.

Level

Junior

Time

~15 min

Cost

Free

The scenario

The Dashboard renders blank for everyone. The browser console shows TypeError: users.map is not a function.

The broken code you start with

loadUsers.js (returns the wrapper, not the array)

// API returns { data: [...users...] }
function loadUsers(response) {
  return response;        // should be response.data
}
// -> users.map(...) throws "users.map is not a function"

What this teaches you

What you did: Returned response.data (the array the UI needs) instead of response (the wrapper object). The Dashboard can now users.map(...) without crashing.

Why it matters: Shape mismatches between API response and UI state are the most common cause of "blank screen" bugs in React apps. Knowing to look at the actual API response shape (curl / Network tab) before trusting the variable name is a 30-second fix that ships hours of incident time.

In the real world: Production codebases prevent this with typed API clients - openapi-typescript-codegen, tRPC, or hand- written types - so the compiler complains at build time when the shape doesn't match. The fix here is mechanical because the TypeScript wasn't there to catch it.

What you'll practice

Reading an API response shape correctly
Returning the array, not the wrapper object
Fixing a render that crashes on .map

Why this impresses a hiring manager

This is a real react problem teams hit in production - not a synthetic puzzle.
It shows you can diagnose and fix a Fullstack issue in a live system end to end.
It lands on your portfolio as a scenario a hiring manager can open and click through.

On your portfolio, this becomes

Fixed loadUsers() to return response.data (the API wraps the array in a data field) instead of the whole response object, so Dashboard's users.map() stops crashing with users.map is not a function.

Keep going

Fix a React useState Stale-State BugFullstack project Fullstack roadmapStep by step to hired Fullstack interview questionsSTAR answers All Fullstack projectsProjects hub

Build this project free

You're in a real cloud workspace in 30 seconds. Fix it, and it lands on your portfolio.

Start this project →