Understanding Keys in React Lists

Assign Keys to a List

Given an array of products, render a list of product names in React and assign proper keys.

Expected output: A React component rendering a list of product names with unique keys assigned.

Hint: Use a unique property like product ID as the key.

Identify Key Issues

Review a React list rendering code snippet that uses array indices as keys and explain potential problems.

Expected output: An explanation of why using indices as keys can cause bugs.

Hint: Consider what happens when the list order changes or items are added/removed.

Keys help React identify which items have changed, been added, or removed, enabling efficient updates and preventing UI bugs.

Using array indices as keys is discouraged for dynamic lists because it can cause rendering issues when the list order changes.

A good key is unique, stable, and predictable, typically derived from unique IDs in your data.