no-array-index-key
Rule category
Suspicious.
What it does
Warns when an array index
is used as a key
prop.
Why is this bad?
The order of items in a list rendering can change over time if an item is inserted, deleted, or the array is reordered. Indexes as keys often lead to subtle and confusing errors.
Examples
Failing
import React from "react";
interface ExampleProps {
ExampleProps.items: {
id: string;
name: string;
}[]
items: { id: string
id: string; name: string
name: string }[];
}
function function Example({ items }: ExampleProps): React.JSX.Element
Example({ items: {
id: string;
name: string;
}[]
items }: ExampleProps) {
return (
<JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>
ul>
{items: {
id: string;
name: string;
}[]
items.Array<{ id: string; name: string; }>.map<React.JSX.Element>(callbackfn: (value: {
id: string;
name: string;
}, index: number, array: {
id: string;
name: string;
}[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.map((item: {
id: string;
name: string;
}
item, index: number
index) => (
// - Do not use Array index as key.
<JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>
li React.Attributes.key?: React.Key | null | undefined
key={index: number
index}>{item: {
id: string;
name: string;
}
item.name: string
name}</JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>
li>
))}
</JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>
ul>
);
}
Passing
import React from "react";
interface ExampleProps {
ExampleProps.items: {
id: string;
name: string;
}[]
items: { id: string
id: string; name: string
name: string }[];
}
function function Example({ items }: ExampleProps): React.JSX.Element
Example({ items: {
id: string;
name: string;
}[]
items }: ExampleProps) {
return (
<JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>
ul>
{items: {
id: string;
name: string;
}[]
items.Array<{ id: string; name: string; }>.map<React.JSX.Element>(callbackfn: (value: {
id: string;
name: string;
}, index: number, array: {
id: string;
name: string;
}[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.map((item: {
id: string;
name: string;
}
item) => (
<JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>
li React.Attributes.key?: React.Key | null | undefined
key={item: {
id: string;
name: string;
}
item.id: string
id}>{item: {
id: string;
name: string;
}
item.name: string
name}</JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>
li>
))}
</JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>
ul>
);
}