Map function usage in React - Step-by-Step Execution

Concept Flow - Map function usage

Start with array

↓

Call map() on array

↓

Apply function to each item

↓

Create new array with results

↓

Render new array in JSX

↓

Display list on screen

The map function takes an array, applies a function to each item, creates a new array, and React renders this new array as elements on the screen.

Execution Sample

React

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
return <ul>{doubled.map(n => <li key={n}>{n}</li>)}</ul>;

This code doubles each number in the array and renders them as list items.

Execution Table

Step	Array Item	Function Applied	Result	Rendered JSX Element
1	1	1 * 2	2	<li key={2}>2</li>
2	2	2 * 2	4	<li key={4}>4</li>
3	3	3 * 2	6	<li key={6}>6</li>
4	Render	Render <ul> with list items	N/A	<ul><li>2</li><li>4</li><li>6</li></ul>
5	End	No more items	N/A	Rendering complete

💡 All array items processed and rendered as list elements.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
numbers	[1,2,3]	[1,2,3]	[1,2,3]	[1,2,3]	[1,2,3]
doubled	[]	[2]	[2,4]	[2,4,6]	[2,4,6]

Key Moments - 3 Insights

Why do we need to use a key prop in the list items?

React uses the key prop to track each element uniquely during updates. Without keys, React can't efficiently update or reorder list items. See execution_table step 1-3 where keys are set to doubled values.

Does map change the original array?

No, map creates a new array with the results and leaves the original array unchanged. The variable_tracker shows 'numbers' stays the same throughout.

What happens if the function inside map returns undefined?

If the function returns undefined, the new array will have undefined values, which React will try to render as empty elements. This can cause unexpected blank spots in the UI.

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What is the result of applying the function to the array item?

A 4

B 2

C 6

D 3

💡 Hint

Check the 'Result' column in execution_table row 2.

At which step does React render the full list inside a <ul> element?

A Step 3

B Step 4

C Step 5

D Step 1

💡 Hint

Look for the 'Rendered JSX Element' column describing the

in execution_table.

If the original array 'numbers' changed during map, what would variable_tracker show after step 3?

A numbers would be [2,4,6]

B numbers would be []

C numbers would remain [1,2,3]

D numbers would be undefined

💡 Hint

Refer to variable_tracker rows for 'numbers' showing no change.

Concept Snapshot

Use map() to transform arrays in React.
map() applies a function to each item.
Returns a new array without changing original.
Render new array in JSX with keys on elements.
Keys help React track list items efficiently.

Full Transcript

This visual execution shows how React uses the map function to transform an array and render it as a list. Starting with an array of numbers, map doubles each number, creating a new array. Then React maps over this new array to create list item elements with unique keys. The execution table traces each step, showing the input, function applied, result, and rendered JSX. The variable tracker confirms the original array stays unchanged while the new array builds up. Key moments clarify why keys are needed and that map does not mutate the original array. The quiz tests understanding of these steps and React's rendering behavior.

Practice

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

easy

A. To mutate the original array directly

B. To remove duplicate elements from the array

C. To sort the array elements alphabetically

D. To transform an array into a list of React elements

Solution

1. Step 1: Understand what map does in JavaScript

   The map function creates a new array by applying a function to each element of the original array without changing it.

2. Step 2: Apply this to React rendering

   In React, map is used to convert each item in an array into a React element, which can then be rendered as a list.

3. Final Answer:

   To transform an array into a list of React elements -> Option D

4. Quick Check:

   map creates React elements from arrays = B [OK]

Hint: Remember: map creates new arrays, perfect for rendering lists [OK]

Common Mistakes:

• Thinking map changes the original array
• Confusing map with sorting or filtering
• Not realizing map returns a new array

2. Which of the following is the correct syntax to use map inside a React component to render a list of names stored in const names = ['Anna', 'Bob', 'Cara']?

easy

A. {names.map(name => <li key={name}>{name}</li>)}

B. {names.map(name => <li>name</li>)}

C. {names.forEach(name => <li key={name}>{name}</li>)}

D. {names.map(name => <li>{name}</li> key={name})}

Solution

1. Step 1: Check the correct use of map and JSX

   Using map with an arrow function returning JSX elements is correct. The element must have a unique key prop inside the returned JSX.

2. Step 2: Identify the correct syntax

   {names.map(name => <li key={name}>{name}</li>)} correctly uses map, returns a list item with curly braces around name, and includes a unique key prop.

3. Final Answer:

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

4. Quick Check:

   map + JSX + key prop = A [OK]

Hint: Always add a unique key prop inside map JSX elements [OK]

Common Mistakes:

• Using forEach instead of map
• Missing curly braces around variables in JSX
• Placing key prop outside the JSX element

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

const numbers = [1, 2, 3];
const listItems = numbers.map(n => <li key={n}>Number: {n * 2}</li>);
return <ul>{listItems}</ul>;

medium

A. Number: 2Number: 4Number: 6

B. SyntaxError due to missing parentheses

C. Number: n * 2Number: n * 2Number: n * 2

D. Number: 1Number: 2Number: 3

Solution

1. Step 1: Understand the map transformation

   Each number in the array is multiplied by 2 inside the JSX expression: {n * 2}.

2. Step 2: Predict the rendered list items

   The list items will show "Number: 2", "Number: 4", and "Number: 6" respectively.

3. Final Answer:

   <ul><li>Number: 2</li><li>Number: 4</li><li>Number: 6</li></ul> -> Option A

4. Quick Check:

   n * 2 applied in map = D [OK]

Hint: Check the expression inside map carefully for output values [OK]

Common Mistakes:

• Assuming original numbers are shown without multiplication
• Confusing JSX expression syntax
• Thinking map returns strings instead of elements

4. Identify the error in this React code using map:

const items = ['a', 'b', 'c'];
return <ul>{items.map(item => <li>{item}</li>)};

medium

A. map function cannot be used inside JSX

B. Missing unique key prop on <li> elements

C. Incorrect use of curly braces around item

D. Array items must be numbers, not strings

Solution

1. Step 1: Check JSX inside map

   The map function returns
2. elements but none have a key prop, which React requires for lists.

3. Step 2: Confirm other syntax is correct

   Curly braces around item are correct, map is valid inside JSX, and array can contain strings.

4. Final Answer:

   Missing unique key prop on <li> elements -> Option B

5. Quick Check:

   React needs keys in lists = C [OK]

Hint: Always add key prop to elements inside map [OK]

Common Mistakes:

• Ignoring missing key warnings
• Thinking keys are optional
• Confusing key prop placement

5. Given this nested array of user objects:

const users = [
  { id: 1, name: 'Alice', hobbies: ['Reading', 'Hiking'] },
  { id: 2, name: 'Bob', hobbies: ['Cooking'] }
];

// Which code correctly renders a list of users with their hobbies?

hard

A. {users.map(user => <div key={user.id}><h3>{user.name}</h3><ul>{user.hobbies.map(hobby => <li key={user.id}>{hobby}</li>)}

B. {users.map(user => <div><h3>{user.name}</h3><ul>{user.hobbies.map(hobby => <li>{hobby}</li>)}

C. {users.map(user => <div key={user.id}><h3>{user.name}</h3><ul>{user.hobbies.map(hobby => <li key={hobby}>{hobby}</li>)}

D. {users.map(user => <div key={user.name}><h3>{user.name}</h3><ul>{user.hobbies.map(hobby => <li key={user.id}>{hobby}</li>)}

Solution

1. Step 1: Check keys on outer and inner lists

   The outer div uses user.id as key, which is unique. The inner li uses hobby as key, which is unique per hobby.

2. Step 2: Verify correct JSX structure and keys

   {users.map(user => <div key={user.id}><h3>{user.name}</h3><ul>{user.hobbies.map(hobby => <li key={hobby}>{hobby}</li>)} correctly nests the hobbies list inside each user and assigns proper keys. Other options miss keys or reuse keys incorrectly.

3. Final Answer:

   {users.map(user => <div key={user.id}><h3>{user.name}</h3><ul>{user.hobbies.map(hobby => <li key={hobby}>{hobby}</li>)} -> Option C

4. Quick Check:

   Unique keys on nested lists = A [OK]

Hint: Use unique keys for both outer and inner mapped elements [OK]

Common Mistakes:

• Reusing same key for multiple elements
• Missing key on inner map elements
• Using non-unique keys like user name or id incorrectly