Prevent missing key props in iterators/collection literals


ID: jsx-react/jsx-key

Language: JavaScript

Severity: Error

Category: Error Prone


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 />]; => <Hello a="" />); => <Hello>{x}</Hello>); => <Hello a="">{x}</Hello>); => { return <Hello>{x}</Hello>}); => { return <Hello a="">{x}</Hello>}); { return <Hello>{x}</Hello>}); { 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" />]; => <Hello key={}>{x}</Hello>);
Array.from([1, 2, 3], (x) => <Hello key={}>{x}</Hello>);
<Hello key={id} {...{ id, caption }} /> jetbrains

Seamless integrations. Try Datadog Code Analysis