src/content/docs/linter/rules/no-array-index-key.mdx
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){
"linter": {
"rules": {
"suspicious": {
"noArrayIndexKey": "error"
}
}
}
}
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. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
Source React documentation
something.forEach((Element, index) => {
<Component key={index} >foo</Component>
});
React.Children.map(this.props.children, (child, index) => (
React.cloneElement(child, { key: index })
))
something.forEach((Element, index) => {
<Component key={`test-key-${index}`} >foo</Component>
});
something.forEach((Element, index) => {
<Component key={"test" + index} >foo</Component>
});
something.forEach((item) => {
<Component key={item.id} >foo</Component>
});
something.forEach((item) => {
<Component key={item.baz.foo} >foo</Component>
});