Importance of keys in React - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

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'

Aid

Bname

Cindex

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' or 'index' instead of 'key' as the prop name.

Not providing any key prop at all.

In React, the key prop uniquely identifies elements in a list to help React update efficiently.

2fill in blank

medium

Complete the code to use the array index as the key in a React list (not recommended but valid).

React

const fruits = ['mango', 'pear', 'grape'];
return (
  <ul>
    {fruits.map((fruit, [1]) => <li key=[1]>{fruit}</li>)}
  </ul>
);

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

Aindex

Bid

Ckey

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable name for the index.

Using the item value as the key without uniqueness.

The second argument of map is the index, which can be used as a key, though it's better to use unique IDs.

3fill in blank

hard

Fix the error in the code by adding the correct key prop to the list items.

React

const tasks = [{id: 1, name: 'Clean'}, {id: 2, name: 'Cook'}];
return (
  <ul>
    {tasks.map(task => <li [1]={task.id}>{task.name}</li>)}
  </ul>
);

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

Akey

Bid

Cindex

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' instead of 'key' as the prop name.

Omitting the key prop entirely.

The key prop must be used to uniquely identify list items in React, not id or others.

4fill in blank

hard

Fill both blanks to create a list of buttons with unique keys and labels.

React

const buttons = ['Save', 'Cancel', 'Delete'];
return (
  <div>
    {buttons.map((btn, [1]) => <button key=[1]>[2]</button>)}
  </div>
);

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

Aindex

Bbtn

Ckey

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable for the key.

Using the wrong variable for the button label.

The index is used as the key, and the button label is the btn variable.

5fill in blank

hard

Fill all three blanks to create a list of user names with unique keys using user IDs.

React

const users = [{id: 101, name: 'Alice'}, {id: 102, name: 'Bob'}];
return (
  <ul>
    {users.map([1] => <li key=[2]>[3]</li>)}
  </ul>
);

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

Auser

Buser.id

Cuser.name

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names in the map function.

Not using the unique id as the key.

We name the map parameter user, use user.id as the key, and display user.name.