# react/no-array-index-key

> Disallow the index of an array item as its `key`

React uses `key` to tell which list item is which between two renders. An index names a position, not an item. After you insert, remove or sort items, React matches components with the wrong data. For example, an input keeps the text that was typed for another row.

The rule looks at the index parameter of array callbacks (`map`, `flatMap`, `forEach`, `filter`, `find`, `findIndex`, `some`, `every`, `reduce`, `reduceRight`) and of `React.Children.map` and `React.Children.forEach`. It also finds the index in a template literal, in a concatenation, in `index.toString()` and in `String(index)`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/no-array-index-key" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
const list = todos.map((todo, index) => <Todo key={index} {...todo} />);
```

{/* bad {"count": 2} */}
```jsx
const rows = users.map((user, index) => <Row key={`user-${index}`} user={user} />);

const cells = users.map((user, index) => React.cloneElement(cell, { key: String(index) }));
```

Not reported:

{/* good */}
```jsx
const list = todos.map(todo => <Todo key={todo.id} {...todo} />);
```

## When not to use it

An index is a fine key for a list that's never reordered, filtered or added to.