Map function usage in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the map() function do in React?

It creates a new array by applying a function to each item in an existing array, often used to render lists of components.

beginner

Why should each child in a list have a unique key prop when using map() in React?

The key helps React identify which items changed, added, or removed, improving rendering performance and avoiding bugs.

beginner

How do you use map() to render a list of names in React?

You pass the array of names to map(), return a JSX element for each name, and include a unique key for each element.

intermediate

What happens if you forget to add a key prop when rendering lists with map()?

React will show a warning in the console and may have inefficient updates or unexpected UI bugs.

intermediate

Can map() be used to transform data before rendering in React?

Yes, map() can change or format data items before returning JSX elements for rendering.

What is the main purpose of the map() function in React?

A To loop over an array and return a new array of JSX elements

B To modify the original array directly

C To filter out unwanted items from an array

D To sort an array alphabetically

The map() function creates a new array by applying a function to each item, commonly used to render lists in React.

Why is the key prop important when using map() to render lists?

A It styles the list items

B It adds event listeners automatically

C It helps React track items for efficient updates

D It prevents the list from rendering

The key prop helps React identify which items changed, improving rendering performance.

Which of these is a correct way to use map() in React?

A array.map(item => <div key={item.id}>{item.name}</div>)

B array.map(item => console.log(item))

C array.map(item => item.push('new'))

D array.map(item => item.sort())

Option A returns JSX elements with unique keys, which is the correct pattern for rendering lists.

What will happen if you use the index of the array as the key in map()?

A It styles the list items

B It always works perfectly

C It prevents React from rendering the list

D It can cause problems if the list changes order or items are added/removed

Using index as key can cause UI bugs when list items change order or are added/removed.

Can map() be used to change the content of list items before rendering?

A No, it only copies the original items

B Yes, it can transform data before returning JSX

C No, it only filters items

D Yes, but only for numbers

map() can transform or format data before rendering JSX elements.

Explain how to use the map() function in React to render a list of items with unique keys.

Think about how you turn an array into visible elements on the screen.

Describe why the key prop is important when rendering lists with map() in React.

Consider how React knows which items changed when the list updates.

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