---
# Don't modify this file manually. This file is auto generated from source, and you will lose your changes next time the website is built.
# Head to the `biomejs/biome` repository, and modify the source code in there.

title: noArrayIndexKey
description: Learn more about noArrayIndexKey
---
import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
<TabItem label="JSX and TSX" icon="seti:javascript">
## Summary
- Rule available since: `v1.0.0`
- Diagnostic Category: [`lint/suspicious/noArrayIndexKey`](/reference/diagnostics#diagnostic-category)
- This rule is **recommended**, meaning it is enabled by default.
- This rule doesn't have a fix.
- The default severity of this rule is [**error**](/reference/diagnostics#error).
- This rule belongs to the following domains:
  - [`react`](/linter/domains#react)
- Sources: 
  - Same as [`react/no-array-index-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md)

## How to configure
```json title="biome.json"
{
	"linter": {
		"rules": {
			"suspicious": {
				"noArrayIndexKey": "error"
			}
		}
	}
}

```
## Description
Discourage the usage of Array index in keys.

>We don’t recommend using indexes for keys if the order of items may change.
This can negatively impact performance and may cause issues with component state.
Check out Robin Pokorny’s article for an
[in-depth explanation on the negative impacts of using an index as a key](https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/).
If you choose not to assign an explicit key to list items then React will default to using indexes as keys.


Source [React documentation](https://reactjs.org/docs/lists-and-keys.html#keys)

## Examples

### Invalid

```jsx
something.forEach((Element, index) => {
    <Component key={index} >foo</Component>
});
```

<pre class="language-text"><code class="language-text">code-block.jsx:2:21 <a href="https://biomejs.dev/linter/rules/no-array-index-key">lint/suspicious/noArrayIndexKey</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Avoid using the index of an array as key property in an element.</span><br />  <br />    <strong>1 │ </strong>something.forEach((Element, index) =&gt; &#123;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>    &lt;Component key=&#123;index&#125; &gt;foo&lt;/Component&gt;<br />   <strong>   │ </strong>                    <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>3 │ </strong>&#125;);<br />    <strong>4 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This is the source of the key value.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>something.forEach((Element, index) =&gt; &#123;<br />   <strong>   │ </strong>                            <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong>    &lt;Component key=&#123;index&#125; &gt;foo&lt;/Component&gt;<br />    <strong>3 │ </strong>&#125;);<br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The order of the items may change, and this also affects performances and component state.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Check the </span><span style="color: lightgreen;"><a href="https://reactjs.org/docs/lists-and-keys.html#keys">React documentation</a></span><span style="color: lightgreen;">. </span><br />  <br /></code></pre>

```jsx
React.Children.map(this.props.children, (child, index) => (
    React.cloneElement(child, { key: index })
))
```

<pre class="language-text"><code class="language-text">code-block.jsx:2:38 <a href="https://biomejs.dev/linter/rules/no-array-index-key">lint/suspicious/noArrayIndexKey</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Avoid using the index of an array as key property in an element.</span><br />  <br />    <strong>1 │ </strong>React.Children.map(this.props.children, (child, index) =&gt; (<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>    React.cloneElement(child, &#123; key: index &#125;)<br />   <strong>   │ </strong>                                     <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>3 │ </strong>))<br />    <strong>4 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This is the source of the key value.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>React.Children.map(this.props.children, (child, index) =&gt; (<br />   <strong>   │ </strong>                                                <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong>    React.cloneElement(child, &#123; key: index &#125;)<br />    <strong>3 │ </strong>))<br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The order of the items may change, and this also affects performances and component state.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Check the </span><span style="color: lightgreen;"><a href="https://reactjs.org/docs/lists-and-keys.html#keys">React documentation</a></span><span style="color: lightgreen;">. </span><br />  <br /></code></pre>

```jsx
something.forEach((Element, index) => {
    <Component key={`test-key-${index}`} >foo</Component>
});
```

<pre class="language-text"><code class="language-text">code-block.jsx:2:33 <a href="https://biomejs.dev/linter/rules/no-array-index-key">lint/suspicious/noArrayIndexKey</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Avoid using the index of an array as key property in an element.</span><br />  <br />    <strong>1 │ </strong>something.forEach((Element, index) =&gt; &#123;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>    &lt;Component key=&#123;&#96;test-key-$&#123;index&#125;&#96;&#125; &gt;foo&lt;/Component&gt;<br />   <strong>   │ </strong>                                <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>3 │ </strong>&#125;);<br />    <strong>4 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This is the source of the key value.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>something.forEach((Element, index) =&gt; &#123;<br />   <strong>   │ </strong>                            <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong>    &lt;Component key=&#123;&#96;test-key-$&#123;index&#125;&#96;&#125; &gt;foo&lt;/Component&gt;<br />    <strong>3 │ </strong>&#125;);<br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The order of the items may change, and this also affects performances and component state.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Check the </span><span style="color: lightgreen;"><a href="https://reactjs.org/docs/lists-and-keys.html#keys">React documentation</a></span><span style="color: lightgreen;">. </span><br />  <br /></code></pre>

```jsx
something.forEach((Element, index) => {
    <Component key={"test" + index} >foo</Component>
});
```

<pre class="language-text"><code class="language-text">code-block.jsx:2:30 <a href="https://biomejs.dev/linter/rules/no-array-index-key">lint/suspicious/noArrayIndexKey</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Avoid using the index of an array as key property in an element.</span><br />  <br />    <strong>1 │ </strong>something.forEach((Element, index) =&gt; &#123;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>    &lt;Component key=&#123;&quot;test&quot; + index&#125; &gt;foo&lt;/Component&gt;<br />   <strong>   │ </strong>                             <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>3 │ </strong>&#125;);<br />    <strong>4 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This is the source of the key value.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>something.forEach((Element, index) =&gt; &#123;<br />   <strong>   │ </strong>                            <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong>    &lt;Component key=&#123;&quot;test&quot; + index&#125; &gt;foo&lt;/Component&gt;<br />    <strong>3 │ </strong>&#125;);<br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The order of the items may change, and this also affects performances and component state.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Check the </span><span style="color: lightgreen;"><a href="https://reactjs.org/docs/lists-and-keys.html#keys">React documentation</a></span><span style="color: lightgreen;">. </span><br />  <br /></code></pre>

### Valid

```jsx
something.forEach((item) => {
    <Component key={item.id} >foo</Component>
});
```

```jsx
something.forEach((item) => {
    <Component key={item.baz.foo} >foo</Component>
});
```

## Related links

- [Disable a rule](/linter/#disable-a-rule)
- [Configure the code fix](/linter#configure-the-code-fix)
- [Rule options](/linter/#rule-options)
- [Source Code](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/src/lint/suspicious/no_array_index_key.rs)
- [Test Cases](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/tests/specs/suspicious/noArrayIndexKey)

</TabItem>
</Tabs>