Rendering lists in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component?

Consider this React component that renders a list of fruits:

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

What will be rendered 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><li>AppleBananaCherry</li></ul>

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

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

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

💡 Hint

Look at what is inside the <li> tags inside the map function.

The component maps over the fruits array and renders each fruit as a list item. The key is set to the index, which is acceptable here. So the output is a list with each fruit as a separate <li>.

📝 Syntax

intermediate

Which option correctly renders a list of numbers in React?

You want to render a list of numbers from 1 to 3 in React. Which code snippet will work without errors and render the numbers as list items?

A

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

B

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

C

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

D

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

💡 Hint

Remember that map returns a new array, but forEach does not.

Option A uses map correctly and provides a unique key for each list item. Option A uses forEach which returns undefined, so React cannot render the list. Option A misses the key prop, which will cause a warning but still renders. Option A uses index without defining it, causing a ReferenceError.

🔧 Debug

advanced

Why does this React list rendering cause a warning?

Look at this React component:

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

When running this code, React shows a warning about keys. What is the cause?

React

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

A The component is missing a wrapping div around the list.

B The array 'colors' is empty, so nothing renders.

C The map function is missing a return statement, causing a syntax error.

D Each list item is missing a unique 'key' prop, which React needs to track items efficiently.

💡 Hint

React requires a special prop on list items to help identify them uniquely.

React needs a unique 'key' prop on each list item to optimize rendering and avoid warnings. Without keys, React cannot track which items changed, added, or removed.

❓ state_output

advanced

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

Consider this React component that renders a list and a button to add an item:

import { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState(['Task 1', 'Task 2']);

  function addTodo() {
    setTodos([...todos, 'Task 3']);
  }

  return (
    <div>
      <ul>
        {todos.map((todo, i) => <li key={i}>{todo}</li>)}
      </ul>
      <button onClick={addTodo}>Add Task</button>
    </div>
  );
}

What will the list show after clicking the 'Add Task' button once?

React

import { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState(['Task 1', 'Task 2']);

  function addTodo() {
    setTodos([...todos, 'Task 3']);
  }

  return (
    <div>
      <ul>
        {todos.map((todo, i) => <li key={i}>{todo}</li>)}
      </ul>
      <button onClick={addTodo}>Add Task</button>
    </div>
  );
}

A <ul><li>Task 1</li><li>Task 2</li><li>Task 3</li></ul>

B <ul><li>Task 1</li><li>Task 2</li></ul>

C <ul><li>Task 3</li></ul>

D <ul><li>Task 1</li><li>Task 2</li><li>Task 3</li><li>Task 3</li></ul>

💡 Hint

Think about how the state updates when the button is clicked.

Clicking the button calls addTodo, which adds 'Task 3' to the existing todos array. The component re-renders showing all three tasks.

🧠 Conceptual

expert

Why is using array index as key in list rendering sometimes problematic?

In React, when rendering lists, developers often use the array index as the key prop like this:

{items.map((item, index) => <li key={index}>{item}</li>)}

Why can this cause problems in some cases?

A Using index as key causes syntax errors in React and prevents rendering.

B Using index as key can cause incorrect UI updates when list items are reordered, inserted, or deleted because keys should uniquely identify items across renders.

C Using index as key makes React render the list items twice, causing performance issues.

D Using index as key disables React's ability to handle events on list items.

💡 Hint

Think about what happens when the order of items changes but keys stay the same.

Keys help React identify which items changed. If keys are indexes, and the list order changes, React may confuse items and update the wrong ones, causing bugs or inefficient rendering.