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.

Practice

1. Why does React require a key prop when rendering lists of components?

easy

A. To style each element differently

B. To uniquely identify each element and help React update efficiently

C. To prevent the list from rendering

D. To add event listeners automatically

Solution

1. Step 1: Understand React's list rendering

   React renders lists by creating elements for each item. It needs a way to track each element uniquely.

2. Step 2: Role of the key prop

   The key prop uniquely identifies each element so React can efficiently update or reorder elements without re-rendering the entire list.

3. Final Answer:

   To uniquely identify each element and help React update efficiently -> Option B

4. Quick Check:

   Keys help React track elements = A [OK]

Hint: Keys uniquely identify list items for efficient updates [OK]

Common Mistakes:

• Thinking keys are for styling
• Believing keys prevent rendering
• Assuming keys add event listeners

2. Which of the following is the correct way to assign keys in a React list?

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>)} where index is a variable not defined

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

Solution

1. Step 1: Check key uniqueness and stability

   Keys must be unique and stable. Using item.id is stable and unique for each item.

2. Step 2: Analyze other options

   Using Math.random() generates new keys each render (bad). Using undefined index causes errors. Omitting keys causes React warnings.

3. Final Answer:

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

4. Quick Check:

   Stable unique keys = A [OK]

Hint: Use stable unique IDs as keys, not random or missing keys [OK]

Common Mistakes:

• Using random values for keys
• Using undefined variables as keys
• Not providing keys at all

3. What will happen if you use the array index as a key when rendering a list that can reorder items?

medium

A. React will ignore the keys and re-render all items

B. React will throw a syntax error

C. React may incorrectly reuse components, causing UI bugs

D. React will optimize rendering perfectly

Solution

1. Step 1: Understand keys and reordering

   Using array index as key works only if list order never changes. If items reorder, keys don't track items correctly.

2. Step 2: Consequences of using index as key

   React may reuse wrong components because keys don't uniquely identify items after reorder, causing UI bugs like wrong data shown.

3. Final Answer:

   React may incorrectly reuse components, causing UI bugs -> Option C

4. Quick Check:

   Index keys cause bugs on reorder = C [OK]

Hint: Avoid index keys if list can reorder or change [OK]

Common Mistakes:

• Expecting no bugs with index keys on reorder
• Thinking React throws errors for index keys
• Assuming React ignores keys if index used

4. Given this code snippet, what is the main problem?

const list = ['a', 'b', 'c'];
return (
  <ul>
    {list.map((item) => <li key={item}>{item}</li>)}
    {list.map((item) => <li key={item}>{item.toUpperCase()}</li>)}
  </ul>
);

medium

A. Keys are missing, so React can't track elements

B. React will render only the first map's items

C. Using item as key causes syntax error

D. Keys are not unique across the entire list, causing React warnings

Solution

1. Step 1: Identify keys in both maps

   Both maps use the same keys: 'a', 'b', 'c'. This means keys are duplicated in the combined list.

2. Step 2: Understand React's key uniqueness requirement

   Keys must be unique among siblings. Duplicate keys cause React warnings and may cause rendering bugs.

3. Final Answer:

   Keys are not unique across the entire list, causing React warnings -> Option D

4. Quick Check:

   Duplicate keys cause warnings = B [OK]

Hint: Ensure keys are unique across all siblings in the list [OK]

Common Mistakes:

• Assuming keys only need to be unique per map call
• Thinking missing keys cause syntax errors
• Believing React renders only first list

5. You have a nested list of users with posts. How should you assign keys to avoid React warnings and ensure efficient updates?

const data = [
  { id: 1, name: 'Alice', posts: [{ id: 101, title: 'Hello' }] },
  { id: 2, name: 'Bob', posts: [{ id: 102, title: 'World' }] }
];

return (
  <div>
    {data.map(user => (
      <section key={user.id}>
        <h2>{user.name}</h2>
        <ul>
          {user.posts.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      </section>
    ))}
  </div>
);

hard

A. Use user.id for section keys and post.id for li keys as shown

B. Use index as keys for both user and post lists

C. Use user.name and post.title as keys

D. Do not use keys for nested lists

Solution

1. Step 1: Check keys for outer list

   Using user.id for section keys is stable and unique for users.

2. Step 2: Check keys for inner list

   Using post.id for li keys is stable and unique for posts within each user.

3. Step 3: Evaluate other options

   Using index keys can cause bugs on reorder. Using names or titles may not be unique. Omitting keys causes warnings.

4. Final Answer:

   Use user.id for section keys and post.id for li keys as shown -> Option A

5. Quick Check:

   Stable unique keys for nested lists = D [OK]

Hint: Use unique IDs at each nesting level for keys [OK]

Common Mistakes:

• Using index keys for nested lists
• Using non-unique strings as keys
• Skipping keys in nested lists