# Warning: Each child in a list should have a unique 'key' prop. See https://reactjs.org/link/warning-keys for more information.

- **ID:** `react/missing-key-props`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 95%

## Root Cause

Rendering an array of components or elements without specifying a unique 'key' prop for each item, which hinders React's reconciliation and can cause rendering bugs.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 16.0.0 | active | — | — |
| React 17.0.2 | active | — | — |
| React 18.2.0 | active | — | — |

## Workarounds

1. **Provide a stable, unique identifier from your data as the key, e.g., `data.map(item => <Component key={item.id} />)`. If no ID exists, generate a unique key using a library like `uuid`.** (95% success)
   ```
   Provide a stable, unique identifier from your data as the key, e.g., `data.map(item => <Component key={item.id} />)`. If no ID exists, generate a unique key using a library like `uuid`.
   ```
2. **If the list is static and never reordered, use the index as a last resort with a comment documenting the limitation: `data.map((item, index) => <Component key={index} />)`** (30% success)
   ```
   If the list is static and never reordered, use the index as a last resort with a comment documenting the limitation: `data.map((item, index) => <Component key={index} />)`
   ```

## Dead Ends

- **** — Index-based keys are unstable if the list can be reordered, filtered, or have items added/removed, leading to incorrect component state and performance issues. (70% fail)
- **** — Random keys cause React to unmount and remount all components on every render, destroying state and causing severe performance degradation. (95% fail)
- **** — Duplicate keys violate the uniqueness requirement and cause React to reuse components incorrectly, leading to unpredictable UI behavior. (90% fail)