Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 5 · 6 / 9Lists and keys
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Lists and keys
01 / 10Overview

Lists and keys

You'll learn to turn an array of data into a list on screen with map, and why each item needs a key.

Why it mattersChats, to-do lists, contacts and feeds are all arrays drawn with map, and a wrong key causes strange bugs.
about 75 min·needs: Arrays and map, Props
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Rendering listsreact.dev · official docs · 25 min · English
MMamun's noteRead all of it. "Keeping list items in order with key" is the part people skip, and it is the part that matters most here.
Video
Full React tutorial #10: outputting listsYouTube · Net Ninja · 7 min · English
MMamun's noteWatch all seven minutes. He keeps blog posts in state, maps them into JSX and gives each one key={blog.id}.
03 / 10

See it step by step

Watch map turn each object into a list item with a key.

players
"Rafi (p1)""Tanvir (p2)"
ScoreCard.jsx
1const players = [
2 { id: "p1", name: "Rafi", runs: 52 },
3 { id: "p2", name: "Tanvir", runs: 31 },
4];
5
6function ScoreCard() {
7 return (
8 <ul>
9 {players.map((player) => (
10 <li key={player.id}>{player.name}: {player.runs}</li>
11 ))}
12 </ul>
13 );
14}
players is an array of two objects. Each one has an id that never changes.
Step 1 / 6
04 / 10

Explanation

Your to-do app keeps tasks in an array of objects. You want one line on screen per task. You don't write the lines by hand: you map the array into JSX, and React shows the array of elements it gets back.

<ul>
  {tasks.map((task) => (
    <li key={task.id}>{task.title}</li>
  ))}
</ul>

Each task becomes one <li>. The key is a name tag for each item. When the list changes (a task is added, deleted or moved), React uses the keys to know which item is which, so it updates the right line and keeps things like a ticked checkbox with the right task.

A good key is unique in that list and never changes for the same item. An id from your data is best. The position in the array (the index) changes when you delete or reorder, so avoid it when the list can change. Never use Math.random(): it gives a new key on every render.

If you forget the key, the list still shows, but the console warns: Each child in a list should have a unique "key" prop. Treat that warning as a bug.

People often add { } to the arrow and forget return. Then the arrow returns undefined for every item, and the list is empty with no error. Use ( ) after the =>, or write return.

When you read a map in JSX, ask: what does one item become, and what is its key?

Words to recognise
mapkey propid<li>
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

App.jsx4 notes
const tasks = [
Mentor note · line 1
An array of objects. Each task has its own id that never changes.
2 { id: 1, title: "Finish lab report", done: true },
3 { id: 2, title: "Read chapter 3", done: false },
4 { id: 3, title: "Practise map", done: false },
5];
6
7export default function TaskList() {
8 return (
9 <ul>
{tasks.map((task) => (
<li key={task.id}>
{task.done ? "Done: " : ""}{task.title}
13 </li>
14 ))}
15 </ul>
16 );
17}
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const students = [
2  { id: 1, name: "Rafi" },
3  { id: 2, name: "Nusrat" },
4];
5 
6function ClassList() {
7  return (
8    <ul>
9      {students.map((s) => {
10        <li key={s.id}>{s.name}</li>;
11      })}
12    </ul>
13  );
14}
What appears on screen?
DrillFind the bug2 / 2
addTask gives each new task an id to use as its key. After a task is deleted, it can hand out an id that is already taken. Fix it so a new id is always one more than the biggest id in the list.
1
2
3
4
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which is the best key for a task in a to-do list?
  2. 2 / 3Where does the key go?
  3. 3 / 3What does {tasks.map((t) => { <li key={t.id}>{t.title}</li> })} show?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Lists and keys?

10 / 10

Done

You can now
Read a map inside JSX, say what list appears, and spot a missing or unstable key.
Next: Forms and inputs Back to Phase 5
On this page
  1. 01Lists and keys
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Lists and keys
01 / 10Overview

Lists and keys

You'll learn to turn an array of data into a list on screen with map, and why each item needs a key.

Why it mattersChats, to-do lists, contacts and feeds are all arrays drawn with map, and a wrong key causes strange bugs.
about 75 min·needs: Arrays and map, Props
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Rendering listsreact.dev · official docs · 25 min · English
MMamun's noteRead all of it. "Keeping list items in order with key" is the part people skip, and it is the part that matters most here.
Video
Full React tutorial #10: outputting listsYouTube · Net Ninja · 7 min · English
MMamun's noteWatch all seven minutes. He keeps blog posts in state, maps them into JSX and gives each one key={blog.id}.
03 / 10

See it step by step

Watch map turn each object into a list item with a key.

players
"Rafi (p1)""Tanvir (p2)"
ScoreCard.jsx
1const players = [
2 { id: "p1", name: "Rafi", runs: 52 },
3 { id: "p2", name: "Tanvir", runs: 31 },
4];
5
6function ScoreCard() {
7 return (
8 <ul>
9 {players.map((player) => (
10 <li key={player.id}>{player.name}: {player.runs}</li>
11 ))}
12 </ul>
13 );
14}
players is an array of two objects. Each one has an id that never changes.
Step 1 / 6
04 / 10

Explanation

Your to-do app keeps tasks in an array of objects. You want one line on screen per task. You don't write the lines by hand: you map the array into JSX, and React shows the array of elements it gets back.

<ul>
  {tasks.map((task) => (
    <li key={task.id}>{task.title}</li>
  ))}
</ul>

Each task becomes one <li>. The key is a name tag for each item. When the list changes (a task is added, deleted or moved), React uses the keys to know which item is which, so it updates the right line and keeps things like a ticked checkbox with the right task.

A good key is unique in that list and never changes for the same item. An id from your data is best. The position in the array (the index) changes when you delete or reorder, so avoid it when the list can change. Never use Math.random(): it gives a new key on every render.

If you forget the key, the list still shows, but the console warns: Each child in a list should have a unique "key" prop. Treat that warning as a bug.

People often add { } to the arrow and forget return. Then the arrow returns undefined for every item, and the list is empty with no error. Use ( ) after the =>, or write return.

When you read a map in JSX, ask: what does one item become, and what is its key?

Words to recognise
mapkey propid<li>
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

App.jsx4 notes
const tasks = [
Mentor note · line 1
An array of objects. Each task has its own id that never changes.
2 { id: 1, title: "Finish lab report", done: true },
3 { id: 2, title: "Read chapter 3", done: false },
4 { id: 3, title: "Practise map", done: false },
5];
6
7export default function TaskList() {
8 return (
9 <ul>
{tasks.map((task) => (
<li key={task.id}>
{task.done ? "Done: " : ""}{task.title}
13 </li>
14 ))}
15 </ul>
16 );
17}
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const students = [
2  { id: 1, name: "Rafi" },
3  { id: 2, name: "Nusrat" },
4];
5 
6function ClassList() {
7  return (
8    <ul>
9      {students.map((s) => {
10        <li key={s.id}>{s.name}</li>;
11      })}
12    </ul>
13  );
14}
What appears on screen?
DrillFind the bug2 / 2
addTask gives each new task an id to use as its key. After a task is deleted, it can hand out an id that is already taken. Fix it so a new id is always one more than the biggest id in the list.
1
2
3
4
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which is the best key for a task in a to-do list?
  2. 2 / 3Where does the key go?
  3. 3 / 3What does {tasks.map((t) => { <li key={t.id}>{t.title}</li> })} show?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Lists and keys?

10 / 10

Done

You can now
Read a map inside JSX, say what list appears, and spot a missing or unstable key.
Next: Forms and inputs Back to Phase 5
On this page
  1. 01Lists and keys
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

Your to-do app keeps tasks in an array of objects. You want one line on screen per task. You don't write the lines by hand: you map the array into JSX, and React shows the array of elements it gets back.

<ul>
  {tasks.map((task) => (
    <li key={task.id}>{task.title}</li>
  ))}
</ul>

Each task becomes one <li>. The key is a name tag for each item. When the list changes (a task is added, deleted or moved), React uses the keys to know which item is which, so it updates the right line and keeps things like a ticked checkbox with the right task.

A good key is unique in that list and never changes for the same item. An id from your data is best. The position in the array (the index) changes when you delete or reorder, so avoid it when the list can change. Never use Math.random(): it gives a new key on every render.

If you forget the key, the list still shows, but the console warns: Each child in a list should have a unique "key" prop. Treat that warning as a bug.

People often add { } to the arrow and forget return. Then the arrow returns undefined for every item, and the list is empty with no error. Use ( ) after the =>, or write return.

When you read a map in JSX, ask: what does one item become, and what is its key?

Words to recognise
mapkey propid<li>

Your to-do app keeps tasks in an array of objects. You want one line on screen per task. You don't write the lines by hand: you map the array into JSX, and React shows the array of elements it gets back.

<ul>
  {tasks.map((task) => (
    <li key={task.id}>{task.title}</li>
  ))}
</ul>

Each task becomes one <li>. The key is a name tag for each item. When the list changes (a task is added, deleted or moved), React uses the keys to know which item is which, so it updates the right line and keeps things like a ticked checkbox with the right task.

A good key is unique in that list and never changes for the same item. An id from your data is best. The position in the array (the index) changes when you delete or reorder, so avoid it when the list can change. Never use Math.random(): it gives a new key on every render.

If you forget the key, the list still shows, but the console warns: Each child in a list should have a unique "key" prop. Treat that warning as a bug.

People often add { } to the arrow and forget return. Then the arrow returns undefined for every item, and the list is empty with no error. Use ( ) after the =>, or write return.

When you read a map in JSX, ask: what does one item become, and what is its key?

Words to recognise
mapkey propid<li>