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.