Map function usage in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React

const names = ['Anna', 'Bob', 'Cara'];
return (
  <ul>
    {names.[1](name => <li key={name}>{name}</li>)}
  </ul>
);

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

AforEach

Bmap

Cfilter

Dreduce

Attempts:

3 left

💡 Hint

Common Mistakes

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

The map function transforms each item in the array into a React element to render.

2fill in blank

medium

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

React

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

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

Akey

Bindex

Cid

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using id or index as prop names instead of key.

React requires a key prop on list items to help identify elements uniquely.

3fill in blank

hard

Fix the error in the map callback parameter to correctly access the index.

React

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

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

AnumIndex

Bidx

Ci

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different parameter name but referencing 'index' inside JSX.

The second parameter in the map callback is conventionally named index to access the current item's position.

4fill in blank

hard

Fill both blanks to create a map that filters and transforms items.

React

const fruits = ['apple', 'banana', 'cherry', 'date'];
const filtered = fruits
  .filter(fruit => fruit.length > [1])
  .map(fruit => fruit.[2]());

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

A5

BtoUpperCase

CtoLowerCase

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong number for length or wrong string method.

We filter fruits with length greater than 5, then convert each to uppercase.

5fill in blank

hard

Fill all three blanks to create a dictionary from an array using map and reduce.

React

const data = ['a', 'bb', 'ccc'];
const result = data.reduce((acc, [1]) => {
  acc[[2]] = [3];
  return acc;
}, {});

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

Aitem

Bitem.length

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up keys and values or using wrong variable names.

We use reduce to build an object where keys are the items and values are their lengths.