Rendering lists in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a list of names using the map method.

React

const names = ['Anna', 'Ben', 'Cara'];

function NameList() {
  return (
    <ul>
      {names.[1](name => <li key={name}>{name}</li>)}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

Afilter

BforEach

Creduce

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using forEach instead of map, which does not return a new array.

Using filter, which only selects items but does not transform them.

The map method is used to transform each item in the array into a React element for rendering.

2fill in blank

medium

Complete the code to add a unique key prop to each list item.

React

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

function FruitList() {
  return (
    <ul>
      {items.map(item => <li [1]={item}>{item}</li>)}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

Aname

Bkey

Cindex

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using id or name instead of key.

Omitting the key prop entirely.

React requires a key prop on list items to help identify which items have changed, added, or removed.

3fill in blank

hard

Fix the error in the code by completing the blank to correctly render list items with keys.

React

const tasks = ['clean', 'cook', 'shop'];

function TaskList() {
  return (
    <ul>
      {tasks.map((task, [1]) => <li key={index}>{task}</li>)}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

Aindex

Bid

Ckey

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name not declared in the map callback parameters.

Using key as a parameter name, which is not correct.

The second parameter of the map callback is the index, which can be used as a key if no unique id is available.

4fill in blank

hard

Fill both blanks to render a list of user objects showing their names with unique keys.

React

const users = [{id: 1, name: 'Sam'}, {id: 2, name: 'Liz'}];

function UserList() {
  return (
    <ul>
      {users.map(user => <li [1]={user.[2]>{user.name}</li>)}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

Akey

Bid

Cname

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using name or index as keys which may not be unique.

Forgetting to add the key prop.

The key prop should be set to a unique value like user.id to help React identify list items.

5fill in blank

hard

Fill all three blanks to render a list of products with keys and display their prices.

React

const products = [{code: 'A1', price: 10}, {code: 'B2', price: 20}];

function ProductList() {
  return (
    <ul>
      {products.map(product => (
        <li [1]={product.[2]>
          {product.[3] USD
        </li>
      ))}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

Akey

Bcode

Cprice

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-unique key value.

Displaying the wrong property for price.

Use key with a unique product code, and display the price property inside the list item.

Practice

1. What is the main purpose of using the map() method when rendering lists in React?

easy

A. To filter out unwanted items from the list

B. To sort the list items alphabetically

C. To transform an array of data into an array of React elements

D. To add styles to each list item

Solution

1. Step 1: Understand the role of map() in React

   The map() method is used to take an array of data and create a new array by transforming each item. In React, this means turning data into React elements.

2. Step 2: Identify what map() does in rendering lists

   When rendering lists, map() creates a React element for each item, which React can then display on the screen.

3. Final Answer:

   To transform an array of data into an array of React elements -> Option C

4. Quick Check:

   map() creates elements from data [OK]

Hint: Remember: map() turns data into elements [OK]

Common Mistakes:

• Thinking map() sorts or filters data
• Using map() without returning elements
• Confusing map() with forEach()

2. Which of the following is the correct way to add a unique key to list items in React?

easy

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

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

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

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

Solution

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

   Keys help React identify which items changed, added, or removed. They must be unique and stable for each list item.

2. Step 2: Evaluate each option for key usage

   {items.map(item => <li>{item.name}</li>)} has no key, so React will warn. {items.map(item => <li key={item.id}>{item.name}</li>)} uses a unique id from the item, which is correct. {items.map(item => <li key="index">{item.name}</li>)} uses a string 'index' for all keys, which is not unique. {items.map(item => <li key={Math.random()}>{item.name}</li>)} uses Math.random(), which changes every render and is unstable.

3. Final Answer:

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

4. Quick Check:

   Unique stable keys = {items.map(item => <li key={item.id}>{item.name}</li>)} [OK]

Hint: Use unique stable keys from data, not random or fixed strings [OK]

Common Mistakes:

• Omitting the key prop entirely
• Using index or random values as keys
• Using non-unique keys causing rendering bugs

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

const fruits = ['Apple', 'Banana', 'Cherry'];

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

medium

A. SyntaxError due to missing keys

B. AppleBananaCherry

C. 012

D. Empty list rendered

Solution

1. Step 1: Understand the map function output

   The map() creates a list item for each fruit with the fruit name as content.

2. Step 2: Check the key usage and rendering

   Using index as key is allowed (though not ideal), so React renders the list with fruit names inside <li> tags.

3. Final Answer:

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

4. Quick Check:

   map() renders fruit names as list items [OK]

Hint: map() returns elements with content, keys don't affect output text [OK]

Common Mistakes:

• Confusing keys with displayed content
• Expecting errors from using index keys
• Thinking map returns indexes instead of values

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

const numbers = [1, 2, 3];

function NumberList() {
  return (
    <ul>
      {numbers.map(number => <li>number</li>)}
    </ul>
  );
}

medium

A. Missing key prop on list items

B. numbers array is empty, so no output

C. Syntax error due to arrow function

D. The word 'number' is rendered literally, not the variable

Solution

1. Step 1: Analyze the JSX inside map

   The code writes <li>number</li> which renders the literal text 'number', not the variable value.

2. Step 2: Identify how to fix variable rendering

   To render the variable, it should be inside curly braces: <li>{number}</li>.

3. Final Answer:

   The word 'number' is rendered literally, not the variable -> Option D

4. Quick Check:

   JSX needs curly braces for variables [OK]

Hint: Use curly braces {} to render variables in JSX [OK]

Common Mistakes:

• Forgetting curly braces around variables
• Ignoring missing key warnings
• Assuming array is empty without checking

5. You have a list of user objects with possible duplicate IDs:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Carol' }
];

function UserList() {
  return (
    <ul>
      {users.map((user, index) => <li key={`${user.id}-${index}`}>{user.name}</li>)}
    </ul>
  );
}

What problem can occur and how to fix it?

hard

A. Duplicate keys cause rendering issues; use unique keys like index or combined values

B. No problem; React handles duplicate keys automatically

C. Syntax error due to duplicate IDs in objects

D. List will render only first two users ignoring duplicates

Solution

1. Step 1: Understand React's key requirement

   Keys must be unique to help React track items. Duplicate keys cause rendering bugs or warnings.

2. Step 2: Identify the duplicate key issue in code

   Two users share id=1, so keys are not unique. This can confuse React during updates.

3. Step 3: Suggest a fix for unique keys

   Use a unique key like combining id and index: key={`${user.id}-${index}`} or a unique identifier.

4. Final Answer:

   Duplicate keys cause rendering issues; use unique keys like index or combined values -> Option A

5. Quick Check:

   Unique keys prevent rendering bugs [OK]

Hint: Keys must be unique; combine id with index if duplicates exist [OK]

Common Mistakes:

• Ignoring duplicate keys causing UI bugs
• Assuming React auto-fixes duplicate keys
• Using only index keys without data context