Common list rendering mistakes 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 items:

function ItemList() {
  const items = ['apple', 'banana', 'cherry'];
  return (
    <ul>
      {items.map((item) => <li>{item}</li>)}
    </ul>
  );
}

What problem will this cause in the browser console?

React

function ItemList() {
  const items = ['apple', 'banana', 'cherry'];
  return (
    <ul>
      {items.map((item) => <li key={item}>{item}</li>)}
    </ul>
  );
}

A No problem; the list renders fine without warnings.

B Warning: Each child in a list should have a unique "key" prop.

C Error: JSX elements cannot be returned without a wrapping element.

D Warning: The map function must return a string, not JSX elements.

💡 Hint

React needs a way to identify each list item uniquely for efficient updates.

React requires a unique key prop on each list item to track changes efficiently. Without keys, React shows a warning in the console.

📝 Syntax

intermediate

Which option correctly fixes the syntax error in this list rendering code?

This React code tries to render a list but has a syntax error:

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

Which option fixes the syntax error?

React

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

A {numbers.map(number => <li key={number}>{number}</li>)}

B {numbers.map(number => <li key={number}>{number}</li></li>)}

C {numbers.map(number => <li key={number}>{number}</li>);}

D {numbers.map(number => <li key={number}>{number})}</li>}

💡 Hint

Check that all JSX tags are properly closed.

The original code misses the closing </li> tag. Option A correctly closes the <li> tag.

🔧 Debug

advanced

Why does this React list rendering cause unexpected behavior?

Look at this React component:

function TodoList() {
  const todos = [
    { id: 1, task: 'Wash dishes' },
    { id: 2, task: 'Do laundry' },
    { id: 3, task: 'Cook dinner' }
  ];

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo.task}</li>
      ))}
    </ul>
  );
}

What problem can arise from using index as the key?

React

function TodoList() {
  const todos = [
    { id: 1, task: 'Wash dishes' },
    { id: 2, task: 'Do laundry' },
    { id: 3, task: 'Cook dinner' }
  ];

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo.task}</li>
      ))}
    </ul>
  );
}

A Using index as key causes React to ignore the list and render nothing.

B Using index as key causes a syntax error in React.

C Using index as key will prevent the list from rendering at all.

D Using index as key can cause incorrect item updates when the list changes order or items are added/removed.

💡 Hint

Think about what happens if the list items reorder or change.

Keys should be stable and unique. Using index as key can cause React to confuse items when the list changes, leading to bugs in UI updates.

❓ state_output

advanced

What will be the output after clicking the button in this React component?

Examine this React component:

import { useState } from 'react';

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

  function incrementFirst() {
    counts[0] += 1;
    setCounts(counts);
  }

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

What happens when the button is clicked?

React

import { useState } from 'react';

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

  function incrementFirst() {
    counts[0] += 1;
    setCounts(counts);
  }

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

A The first count number does not update in the UI because React state was mutated directly.

B The component crashes with a runtime error when clicking the button.

C The first count number updates and the UI re-renders showing the incremented value.

D All count numbers reset to zero after clicking the button.

💡 Hint

React state should not be mutated directly; think about how React detects changes.

Mutating the state array directly and passing the same reference to setState does not trigger React to re-render. The UI stays the same.

🧠 Conceptual

expert

Which option best explains why keys are critical in React list rendering?

Why does React require a unique key for each element in a list?

A Keys prevent React from rendering duplicate list items by filtering them out automatically.

B Keys are used to style list items differently based on their position.

C Keys help React identify which items have changed, been added, or removed to optimize rendering performance.

D Keys allow React to convert lists into arrays internally for faster processing.

💡 Hint

Think about how React updates the UI efficiently when data changes.

React uses keys to track elements between renders. This helps React update only the changed elements instead of re-rendering the entire list.

Practice

1. Why is it important to add a unique key prop when rendering lists in React?

easy

A. It automatically sorts the list alphabetically.

B. It makes the list items look prettier on the screen.

C. It prevents the list from rendering at all.

D. It helps React identify which items have changed, added, or removed.

Solution

1. Step 1: Understand the role of keys in React lists

   Keys help React track each item uniquely when the list changes.

2. Step 2: Identify the effect of keys on UI updates

   With keys, React can efficiently update only changed items, improving performance and correctness.

3. Final Answer:

   It helps React identify which items have changed, added, or removed. -> Option D

4. Quick Check:

   Keys improve UI updates = A [OK]

Hint: Keys uniquely identify list items for React updates [OK]

Common Mistakes:

• Thinking keys affect styling
• Believing keys prevent rendering
• Assuming keys sort the list

2. Which of the following is the correct way to add keys when rendering a list of items stored in items array?

easy

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

B. {items.map(item => <li key={item.id}>{item.name}</li>)}

C. {items.map(item => <li>{item.name}</li>)}

D. {items.map((item, i) => <li key={i + 1}>{item.name}</li>)}

Solution

1. Step 1: Check key uniqueness and stability

   Using item.id ensures each key is unique and stable across renders.

2. Step 2: Evaluate other options

   Using index as key (options A and D) can cause bugs if list changes; no key ({items.map(item => <li>{item.name}</li>)}) causes warnings.

3. Final Answer:

   {items.map(item => <li key={item.id}>{item.name}</li>)} -> Option B

4. Quick Check:

   Use unique stable keys = B [OK]

Hint: Use unique IDs, not indexes, as keys [OK]

Common Mistakes:

• Using array index as key
• Omitting the key prop
• Using non-unique keys

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

const items = ['apple', 'banana', 'cherry'];

function FruitList() {
  return (
    <ul>
      {items.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

Assuming the list changes by adding 'date' at the start, what problem might occur?

medium

A. React may reuse wrong list items causing UI bugs due to index keys.

B. React will throw a syntax error because keys cannot be numbers.

C. The list will not render at all.

D. React will correctly update the list with no issues.

Solution

1. Step 1: Understand index as key behavior

   Using index as key means keys depend on item position, not identity.

2. Step 2: Analyze effect of adding item at start

   Adding 'date' at start shifts indexes, causing React to mismatch items and update wrong elements.

3. Final Answer:

   React may reuse wrong list items causing UI bugs due to index keys. -> Option A

4. Quick Check:

   Index keys cause UI bugs on list changes = D [OK]

Hint: Index keys break UI if list order changes [OK]

Common Mistakes:

• Assuming index keys are always safe
• Thinking React throws error for numeric keys
• Believing list won't render without unique keys

4. Identify the error in this React list rendering code:

const users = [{id: 1, name: 'Anna'}, {id: 2, name: 'Ben'}];

function UserList() {
  return (
    <ul>
      {users.map(user => <li key={user.name}>{user.name}</li>)}
    </ul>
  );
}

medium

A. Using user.name as key may cause duplicate keys if names repeat.

B. Missing key prop on list items.

C. Using curly braces inside JSX is invalid here.

D. The map function should return a fragment instead of <li>.

Solution

1. Step 1: Check key uniqueness

   Keys must be unique and stable. Using user.name risks duplicates if names repeat.

2. Step 2: Confirm other code parts

   Key prop is present; JSX syntax is correct;
3. is appropriate for list items.

4. Final Answer:

   Using user.name as key may cause duplicate keys if names repeat. -> Option A

5. Quick Check:

   Keys must be unique = C [OK]

Hint: Keys must be unique, avoid using non-unique fields [OK]

Common Mistakes:

• Using non-unique keys like names
• Omitting key prop
• Misunderstanding JSX syntax

5. You have a list of tasks where some tasks have duplicate IDs due to a backend bug. How should you render this list in React to avoid key conflicts?

const tasks = [
  {id: 1, title: 'Task A'},
  {id: 2, title: 'Task B'},
  {id: 1, title: 'Task C'}
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={/* What to put here? */}>{task.title}</li>
      ))}
    </ul>
  );
}

hard

A. Use key={task.id} even if duplicates exist.

B. Use key={index} to guarantee uniqueness despite duplicates.

C. Combine id and index like key={`${task.id}-${index}`} for unique keys.

D. Omit the key prop to avoid errors.

Solution

1. Step 1: Understand key uniqueness requirement

   Keys must be unique and stable. Duplicate IDs break uniqueness.

2. Step 2: Combine id and index for uniqueness

   Combining id and index creates unique keys like '1-0', '1-2', avoiding conflicts.

3. Final Answer:

   Combine id and index like key={`${task.id}-${index}`} for unique keys. -> Option C

4. Quick Check:

   Unique keys from combined values = A [OK]

Hint: Combine id and index for unique keys if duplicates exist [OK]

Common Mistakes:

• Using duplicate IDs as keys
• Omitting keys
• Using only index keys causing UI bugs