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.