Ensures unique key prop

Docs > Code Analysis > Static Analysis Rules > Ensures unique key prop

This page is not yet available in Spanish. We are working on its translation.
If you have any questions or feedback about our current translation project, feel free to reach out to us!

Metadata

ID: jsx-react/jsx-no-duplicate-key

Language: JavaScript

Severity: Error

Category: Error Prone

Description

Duplicate JSX element keys can lead to unexpected behavior. Keys should always be unique.

Non-Compliant Code Examples

[<Hello key="one" />, <Hello key="one">foo</Hello>, <Hello key="one" />];
[<Hello key={"foo"} />, <Hello key={`foo`}>foo</Hello>];
[<Hello key={a} />, <Hello key={a} />];
data.map(x => <Hello key="a" />);
data.map(x => <Hello key={1}>{x}</Hello>);
data.map(x => <Hello key={"1" + "2"}>{x}</Hello>);
data.map(x => { return <Hello key={true}>{x}</Hello>});
data.map(function(x) { return <Hello key={[]}>{x}</Hello>});
Array.from([1, 2, 3], (x) => <Hello key={{}}>{x}</Hello>);

Compliant Code Examples

[<Hello key="first" />, <Hello key="second">foo</Hello>, <Hello key="third" />];
data.map(x => { return <Hello key={`prefix-${x}`}>{x}</Hello>});