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.