Rendering Data›Core· 40 min read

Lists & Keys

Turn arrays of data into lists of components with map — the pattern you will use in every real app.

What you will learn

Render a list with map
Add a key to each item
Render an array of objects

Data → UI with map

To show a list, map over an array and return a component for each item. This is the heart of data-driven React.

map an array to <li> elements

function App() {
  const skills = ["HTML", "CSS", "JavaScript", "React"];
  return (
    <ul>
      {skills.map((skill, i) => (
        <li key={i}>{skill}</li>
      ))}
    </ul>
  );
}

Live preview

Inside the <ul>, the braces { } let us run JavaScript. We call skills.map(...), which loops over the array and returns a new <li> for each skill. So one array of four strings becomes four <li> elements on the page. The i is the position (0, 1, 2, 3) and we use it as the key (more on keys next).

Note: Output: A bulleted list: • HTML • CSS • JavaScript • React You wrote the list once as data, and map built the four list items for you.

The key prop

Each item in a mapped list needs a unique key so React can track it efficiently. Use a stable id if you have one; the index is a last resort.

Rendering an array of objects

function App() {
  const users = [
    { id: 1, name: "Asha", role: "Student" },
    { id: 2, name: "Ravi", role: "Trainer" },
    { id: 3, name: "Meera", role: "Student" }
  ];
  return (
    <div>
      {users.map(user => (
        <div key={user.id} style={{ padding: 8, borderBottom: "1px solid #eee" }}>
          <b>{user.name}</b> — {user.role}
        </div>
      ))}
    </div>
  );
}

Live preview

Real data is usually a list of objects, not just strings. Here each user has an id, name and role. We map over the array and, for each user, return a <div> showing {user.name} and {user.role}. Because each user has a real, unique id, we use key={user.id} — the best kind of key. This exact data → map → cards pattern is how you display posts, products and messages from a database.

Note: Output: Three rows, each separated by a thin line: Asha — Student Ravi — Trainer Meera — Student

Watch out: Always give mapped elements a unique key. Without it React shows a console warning and may update the list incorrectly. Prefer a real id over the array index.

Tip: This data → map → components pattern is exactly how you will display posts, products, messages — anything from a database. Master it.

Q. Why does each item in a mapped list need a key?

Answer: Keys let React identify which items changed, were added, or removed, so it updates the list efficiently and correctly.

✍️ Practice

Render an array of your five favourite movies as a list.
Render an array of product objects (name + price) as cards with keys.

🏠 Homework

Create an array of 5 student objects and render them as a styled list with keys.