Common list rendering mistakes in React - Mini Project: Build & Apply

Common List Rendering Mistakes in React

📖 Scenario: You are building a simple React component that shows a list of fruits on a webpage. This is a common task in web apps where you want to display multiple items dynamically.

🎯 Goal: Create a React functional component that renders a list of fruits correctly. You will learn how to set up the data, configure a key for each list item, render the list using map(), and complete the component structure to avoid common mistakes.

📋 What You'll Learn

Create a list of fruits as an array of strings

Add a unique key for each list item when rendering

Use the map() method to render the list inside JSX

Complete the React component with proper return and export

💡 Why This Matters

🌍 Real World

Rendering lists is a very common task in web apps, such as showing products, messages, or user comments. Using keys correctly helps React update the UI efficiently.

💼 Career

Understanding list rendering and keys is essential for React developers to build performant and bug-free user interfaces.

1

DATA SETUP: Create the fruits array

Create a constant array called fruits with these exact string values: "Apple", "Banana", "Cherry", "Date", "Elderberry".

React

// Create the fruits array with the exact values
// Your code here

Hint

Use const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"] to create the array.

2

CONFIGURATION: Prepare a unique key for each fruit

Create a function called getKey that takes two parameters: fruit and index. It should return a string combining fruit and index separated by a dash, like "Apple-0".

React

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

// Create getKey function to generate unique keys
// Your code here

Hint

Use a template string to combine fruit and index with a dash.

3

CORE LOGIC: Render the fruits list with keys using map()

Create a React functional component called FruitList. Inside its return statement, render an unordered list <ul>. Use fruits.map() with parameters fruit and index to create list items <li>. Each <li> must have a key attribute set by calling getKey(fruit, index). The content of each <li> is the fruit string.

React

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

function getKey(fruit, index) {
  return `${fruit}-${index}`
}

// Create FruitList component that renders fruits with keys
// Your code here

Hint

Use parentheses around JSX and return the <ul> with mapped <li> elements having keys.

4

COMPLETION: Export the FruitList component

Add the line export default FruitList at the end of the file to export the component.

React

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

function getKey(fruit, index) {
  return `${fruit}-${index}`
}

function FruitList() {
  return (
    
      {fruits.map((fruit, index) => (
        {fruit}
      ))}
    
  )
}

// Export the FruitList component
// Your code here

Hint

Use export default FruitList to make the component usable in other files.

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