Prevent missing key props in iterators/collection literals

Cette page n'est pas encore disponible en français, sa traduction est en cours.
Si vous avez des questions ou des retours sur notre projet de traduction actuel, n'hésitez pas à nous contacter.

Metadata

ID: jsx-react/jsx-key

Language: JavaScript

Severity: Error

Category: Error Prone

Description

In JSX you need to specify a key prop for each item of a list because if it’s missing it could lead to unexpected renders or stale UI. This rule checks for possible JSX lists and warns if the key prop is missing.

Non-Compliant Code Examples

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

Compliant Code Examples

[<Hello key="first" test="foo" />, <Hello key="second" />, <Hello key="third" />];
data.map((x) => <Hello key={x.id}>{x}</Hello>);
Array.from([1, 2, 3], (x) => <Hello key={x.id}>{x}</Hello>);
<Hello key={id} {...{ id, caption }} />
https://static.datadoghq.com/static/images/logos/github_avatar.svg https://static.datadoghq.com/static/images/logos/vscode_avatar.svg jetbrains

Seamless integrations. Try Datadog Code Security

Datadog Code Security
PREVIEWING: brett.blue/post-reorg-tweaks