Skip to main content

Data List Rendering

Difficulty: Warm-up

Problem Statement​

Given an array of objects, render a list showing each item.

Live Demo​

Try the running app below — this is the target behavior for the challenge.

Data List Rendering — Live Demo

Data List

  • Daniel — 25
  • John — 24
  • Jen — 31

What Interviewers Expect​

  • Use map() with stable keys.
  • Extract item row into a small component when useful.
  • Keep data separate from rendering logic.

Step-by-Step Implementation​

Step 1 — Define data​

Start with static array of objects.

const people = [{ id: 1, name: 'Daniel', age: 25 }];

Step 2 — Map to list items​

Render <li> for each entry with key={person.id}.

{people.map((p) => <li key={p.id}>{p.name} — {p.age}</li>)}

Complete Implementation​

Copy-paste ready single-file solution. Use this as your reference after attempting the challenge yourself, or paste it into CodeSandbox / StackBlitz to run locally.

App.jsx
import React from 'react';

const PEOPLE = [
  {id: 1, name: 'Daniel', age: 25},
  {id: 2, name: 'John', age: 24},
  {id: 3, name: 'Jen', age: 31},
];

export default function App() {
  return (
    <div>
      <h4>Data List</h4>
      <ul>
        {PEOPLE.map((person) => (
          <li key={person.id}>
            {person.name} — {person.age}
          </li>
        ))}
      </ul>
    </div>
  );
}

Final Checklist​

  • UI works for primary flow
  • Edge cases handled (empty/disabled/loading where relevant)
  • State updates are immutable
  • Components are readable and reasonably split
  • You can explain trade-offs out loud in an interview

Next Challenge​

Continue to the next item in the sidebar when you're comfortable implementing this from scratch in 30–45 minutes.