Common list rendering mistakes in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a list of items in React.

React

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

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

Aindex

Bitem

CMath.random()

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Using the item value as key when items can repeat.

Using Math.random() as key causes unstable keys.

Using index as the key is acceptable for static lists without reordering.

2fill in blank

medium

Complete the code to avoid missing keys warning in React list rendering.

React

const List = () => {
  const items = [{id: 1, name: 'apple'}, {id: 2, name: 'banana'}];
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
};

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

Aindex

Bitem.name

CMath.random()

Ditem.id

Attempts:

3 left

💡 Hint

Common Mistakes

Using item name as key when names can repeat.

Using Math.random() causes keys to change every render.

Using a unique stable id like item.id as key prevents React warnings and improves performance.

3fill in blank

hard

Fix the error in the code that causes React to warn about keys.

React

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

// Add [1] to fix the warning.

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

Aa state hook

Ba unique key prop

Ca fragment wrapper

Dan event handler

Attempts:

3 left

💡 Hint

Common Mistakes

Ignoring the warning and not adding keys.

Using non-unique or unstable keys.

React requires a unique key prop on list items to track them efficiently.

4fill in blank

hard

Fill both blanks to correctly render a list with unique keys and avoid common mistakes.

React

const List = () => {
  const items = [{id: 10, name: 'apple'}, {id: 20, name: 'banana'}];
  return (
    <ul>
      {items.map(({id, name}) => <li key={id}>{name}</li>)}
    </ul>
  );
};

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

Aid

Bindex

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using index as key when items have unique ids.

Using name as key when names can repeat.

Destructure id from each item and use it as the key prop for stable unique keys.

5fill in blank

hard

Fill all three blanks to correctly render a list with keys and avoid common React list mistakes.

React

const List = () => {
  const items = [{id: 1, label: 'A'}, {id: 2, label: 'B'}, {id: 3, label: 'C'}];
  return (
    <ul>
      {items.map(({id, label}) => <li key={id}>{label}</li>)}
    </ul>
  );
};

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

Aid

Clabel

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using index as key causing unstable keys.

Displaying id instead of label.

Destructure id and label, use id as key and display label inside the list item.