Rendering lists in React - Step-by-Step Execution

Concept Flow - Rendering lists in React

Start Component Render

↓

JSX Evaluates Array.map()

↓

For Each Item: Create JSX Element

↓

Add Unique Key to Each Element

↓

Return Array of Elements

↓

React Renders List in DOM

↓

User Sees List Items Displayed

React renders lists by running map() on an array, creating JSX elements with unique keys, then displaying them in the DOM.

Execution Sample

React

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => <li key={index}>{fruit}</li>)}
    </ul>
  );
}

This code renders a list of fruit names as <li> items inside a <ul>.

Execution Table

Step	Action	Input Array	map() Output	Key Used	Rendered JSX Element
1	Start render	['Apple', 'Banana', 'Cherry']	Not started	N/A	N/A
2	map() called	['Apple', 'Banana', 'Cherry']	Processing first item	index=0	<li key={0}>Apple</li>
3	map() continues	['Apple', 'Banana', 'Cherry']	Processing second item	index=1	<li key={1}>Banana</li>
4	map() continues	['Apple', 'Banana', 'Cherry']	Processing third item	index=2	<li key={2}>Cherry</li>
5	map() returns array	['Apple', 'Banana', 'Cherry']	[<li key={0}>Apple</li>, <li key={1}>Banana</li>, <li key={2}>Cherry</li>]	keys 0,1,2	Array of <li> elements
6	React renders list	N/A	N/A	N/A	<ul> with 3 <li> children displayed
7	Render complete	N/A	N/A	N/A	User sees bullet list: Apple, Banana, Cherry

💡 All items processed, map() returned full array, React rendered list in DOM

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
fruits	['Apple', 'Banana', 'Cherry']	Same	Same	Same	Same
index	N/A	0	1	2	N/A
map() output	[]	[<li key={0}>Apple</li>]	[<li key={0}>Apple</li>, <li key={1}>Banana</li>]	[<li key={0}>Apple</li>, <li key={1}>Banana</li>, <li key={2}>Cherry</li>]	Final array of JSX elements

Key Moments - 3 Insights

Why do we need to add a unique key to each list item?

React uses keys to track each element uniquely for efficient updates. Without keys, React may re-render all items unnecessarily. See execution_table rows 2-5 where keys are assigned.

Can we use the array index as the key for list items?

Using index as key works for static lists but can cause problems if list items reorder or change. It's better to use a unique id if available. Here, index is used for simplicity (execution_table rows 2-4).

What happens if we forget to return the JSX element inside map()?

If map() callback does not return JSX, the output array will have undefined items, so React renders nothing or errors. In this example, each map callback returns <li> (execution_table rows 2-4).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the key used for the second list item?

A 0

B 2

C 1

D undefined

💡 Hint

Check the 'Key Used' column at step 3 in execution_table

At which step does map() finish creating all list items?

A Step 4

B Step 5

C Step 6

D Step 7

💡 Hint

Look for the step where map() returns the full array in execution_table

If we remove the key attribute from <li>, what problem might occur?

A React may inefficiently update the list causing bugs

B React will throw a syntax error

C React will render the list twice

D Nothing, keys are optional

💡 Hint

Refer to key_moments about why keys are important

Concept Snapshot

Rendering lists in React:
- Use array.map() inside JSX to create elements
- Each element needs a unique key prop
- Keys help React track items for efficient updates
- Return JSX from map callback
- Render the array inside a container like <ul>

Full Transcript

Rendering lists in React means taking an array of data and turning it into a set of JSX elements that React can show on the page. We use the map() function on the array to create a new array of JSX elements. Each element must have a unique key property so React can keep track of them efficiently. In the example, a list of fruits is mapped to <li> elements with keys based on their index. React then renders these inside a <ul>. This process helps React update only the changed items when the list changes, improving performance and avoiding bugs.

Practice

1. What is the main purpose of using the map() method when rendering lists in React?

easy

A. To filter out unwanted items from the list

B. To sort the list items alphabetically

C. To transform an array of data into an array of React elements

D. To add styles to each list item

Solution

1. Step 1: Understand the role of map() in React

   The map() method is used to take an array of data and create a new array by transforming each item. In React, this means turning data into React elements.

2. Step 2: Identify what map() does in rendering lists

   When rendering lists, map() creates a React element for each item, which React can then display on the screen.

3. Final Answer:

   To transform an array of data into an array of React elements -> Option C

4. Quick Check:

   map() creates elements from data [OK]

Hint: Remember: map() turns data into elements [OK]

Common Mistakes:

• Thinking map() sorts or filters data
• Using map() without returning elements
• Confusing map() with forEach()

2. Which of the following is the correct way to add a unique key to list items in React?

easy

A. {items.map(item => <li key={item.id}>{item.name}</li>)}

B. {items.map(item => <li key={Math.random()}>{item.name}</li>)}

C. {items.map(item => <li key="index">{item.name}</li>)}

D. {items.map(item => <li>{item.name}</li>)}

Solution

1. Step 1: Understand the importance of keys in React lists

   Keys help React identify which items changed, added, or removed. They must be unique and stable for each list item.

2. Step 2: Evaluate each option for key usage

   {items.map(item => <li>{item.name}</li>)} has no key, so React will warn. {items.map(item => <li key={item.id}>{item.name}</li>)} uses a unique id from the item, which is correct. {items.map(item => <li key="index">{item.name}</li>)} uses a string 'index' for all keys, which is not unique. {items.map(item => <li key={Math.random()}>{item.name}</li>)} uses Math.random(), which changes every render and is unstable.

3. Final Answer:

   {items.map(item => <li key={item.id}>{item.name}</li>)} -> Option A

4. Quick Check:

   Unique stable keys = {items.map(item => <li key={item.id}>{item.name}</li>)} [OK]

Hint: Use unique stable keys from data, not random or fixed strings [OK]

Common Mistakes:

• Omitting the key prop entirely
• Using index or random values as keys
• Using non-unique keys causing rendering bugs

3. What will be the output of this React code snippet?

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => <li key={index}>{fruit}</li>)}
    </ul>
  );
}

medium

A. SyntaxError due to missing keys

B. AppleBananaCherry

C. 012

D. Empty list rendered

Solution

1. Step 1: Understand the map function output

   The map() creates a list item for each fruit with the fruit name as content.

2. Step 2: Check the key usage and rendering

   Using index as key is allowed (though not ideal), so React renders the list with fruit names inside <li> tags.

3. Final Answer:

   <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul> -> Option B

4. Quick Check:

   map() renders fruit names as list items [OK]

Hint: map() returns elements with content, keys don't affect output text [OK]

Common Mistakes:

• Confusing keys with displayed content
• Expecting errors from using index keys
• Thinking map returns indexes instead of values

4. Identify the error in this React list rendering code:

const numbers = [1, 2, 3];

function NumberList() {
  return (
    <ul>
      {numbers.map(number => <li>number</li>)}
    </ul>
  );
}

medium

A. Missing key prop on list items

B. numbers array is empty, so no output

C. Syntax error due to arrow function

D. The word 'number' is rendered literally, not the variable

Solution

1. Step 1: Analyze the JSX inside map

   The code writes <li>number</li> which renders the literal text 'number', not the variable value.

2. Step 2: Identify how to fix variable rendering

   To render the variable, it should be inside curly braces: <li>{number}</li>.

3. Final Answer:

   The word 'number' is rendered literally, not the variable -> Option D

4. Quick Check:

   JSX needs curly braces for variables [OK]

Hint: Use curly braces {} to render variables in JSX [OK]

Common Mistakes:

• Forgetting curly braces around variables
• Ignoring missing key warnings
• Assuming array is empty without checking

5. You have a list of user objects with possible duplicate IDs:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Carol' }
];

function UserList() {
  return (
    <ul>
      {users.map((user, index) => <li key={`${user.id}-${index}`}>{user.name}</li>)}
    </ul>
  );
}

What problem can occur and how to fix it?

hard

A. Duplicate keys cause rendering issues; use unique keys like index or combined values

B. No problem; React handles duplicate keys automatically

C. Syntax error due to duplicate IDs in objects

D. List will render only first two users ignoring duplicates

Solution

1. Step 1: Understand React's key requirement

   Keys must be unique to help React track items. Duplicate keys cause rendering bugs or warnings.

2. Step 2: Identify the duplicate key issue in code

   Two users share id=1, so keys are not unique. This can confuse React during updates.

3. Step 3: Suggest a fix for unique keys

   Use a unique key like combining id and index: key={`${user.id}-${index}`} or a unique identifier.

4. Final Answer:

   Duplicate keys cause rendering issues; use unique keys like index or combined values -> Option A

5. Quick Check:

   Unique keys prevent rendering bugs [OK]

Hint: Keys must be unique; combine id with index if duplicates exist [OK]

Common Mistakes:

• Ignoring duplicate keys causing UI bugs
• Assuming React auto-fixes duplicate keys
• Using only index keys without data context