Map function usage in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this React component?

Consider this React component that uses map to render a list of items:

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {fruits.map((fruit, index) => <li key={index}>{fruit}</li>)}
    </ul>
  );
}

What will this component render in the browser?

React

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {fruits.map((fruit, index) => <li key={index}>{fruit}</li>)}
    </ul>
  );
}

A <ul>AppleBananaCherry</ul>

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

C <ul><li>0</li><li>1</li><li>2</li></ul>

D <ul><li>fruit</li><li>fruit</li><li>fruit</li></ul>

💡 Hint

Remember that map returns a new array of elements, and React renders each element inside the list.

The map function creates a new array of <li> elements, each containing the fruit name. The key prop helps React identify each item uniquely.

📝 Syntax

intermediate

Which option correctly uses map to double numbers in React JSX?

You want to display a list of doubled numbers from an array [1, 2, 3]. Which code snippet correctly uses map inside JSX?

A {[1, 2, 3].map(num => &lt;div key={num}&gt;{num * 2}&lt;/div&gt;)}

B {[1, 2, 3].map(num =&gt; &lt;div key&gt;{num * 2}&lt;/div&gt;)}

C {[1, 2, 3].map(num =&gt; &lt;div&gt;num * 2&lt;/div&gt;)}

D {[1, 2, 3].map(num) =&gt; &lt;div&gt;{num * 2}&lt;/div&gt;}

💡 Hint

Check for correct arrow function syntax and proper use of key attribute.

Option A correctly uses an arrow function and includes a unique key prop. Option A has an invalid key attribute (missing value), Option A has a syntax error, and Option A renders the string 'num * 2' literally.

🔧 Debug

advanced

Why does this React component throw a warning about keys?

Look at this component:

function Colors() {
  const colors = ['red', 'green', 'blue'];
  return (
    <div>
      {colors.map(color => <span>{color}</span>)}
    </div>
  );
}

What is the cause of the warning in the browser console?

React

function Colors() {
  const colors = ['red', 'green', 'blue'];
  return (
    <div>
      {colors.map(color => <span>{color}</span>)}
    </div>
  );
}

A The map function is missing a return statement.

B The 'color' variable is not defined inside the map function.

C React components cannot return multiple elements.

D Each child in a list should have a unique 'key' prop.

💡 Hint

React requires a special prop when rendering lists to track items.

React needs a unique key prop on each element created in a list to optimize rendering. Without it, React shows a warning.

❓ state_output

advanced

What is the output after clicking the button in this React component?

Consider this component that uses map and state:

import { useState } from 'react';

function CounterList() {
  const [counts, setCounts] = useState([0, 0, 0]);

  function incrementFirst() {
    const newCounts = counts.map((count, index) => index === 0 ? count + 1 : count);
    setCounts(newCounts);
  }

  return (
    <div>
      {counts.map((count, i) => <p key={i}>Count {i}: {count}</p>)}
      <button onClick={incrementFirst}>Increment First</button>
    </div>
  );
}

What will be displayed after clicking the button once?

React

import { useState } from 'react';

function CounterList() {
  const [counts, setCounts] = useState([0, 0, 0]);

  function incrementFirst() {
    const newCounts = counts.map((count, index) => index === 0 ? count + 1 : count);
    setCounts(newCounts);
  }

  return (
    <div>
      {counts.map((count, i) => <p key={i}>Count {i}: {count}</p>)}
      <button onClick={incrementFirst}>Increment First</button>
    </div>
  );
}

A

Count 0: 0
Count 1: 0
Count 2: 1

B

Count 0: 0
Count 1: 1
Count 2: 0

C

Count 0: 1
Count 1: 0
Count 2: 0

D

Count 0: 1
Count 1: 1
Count 2: 1

💡 Hint

Check which index is incremented in the map function.

The map function adds 1 only to the first element (index 0). The others remain unchanged.

🧠 Conceptual

expert

Why is using array index as key in map sometimes problematic?

In React, when rendering lists with map, developers often use the array index as the key prop. Why can this cause issues?

A Using index as key can cause incorrect component reuse when list items change order or are added/removed.

B React requires keys to be strings, so numbers like index cause errors.

C Keys must be unique across the entire app, so index keys cause conflicts.

D Using index as key slows down rendering because React re-renders all items every time.

💡 Hint

Think about what happens when the list changes dynamically.

When list items reorder or change, using index as key can cause React to reuse components incorrectly, leading to bugs or wrong UI updates.