useJsxKeyInIterable
Summary
Section titled Summary- Rule available since:
v1.6.0 - Diagnostic Category:
lint/correctness/useJsxKeyInIterable - This rule doesn’t have a fix.
- The default severity of this rule is error.
- This rule belongs to the following domains:
- Sources:
- Same as
react/jsx-key
- Same as
Description
Section titled DescriptionDisallow missing key props in iterators/collection literals.
Warn if an element that likely requires a key prop—namely, one present in an array literal or an arrow function expression. Check out React documentation for explanation on the why does React need keys.
Examples
Section titled ExamplesInvalid
Section titled Invalid[<Hello />];code-block.jsx:1:2 lint/correctness/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Missing key property for this element in iterable.
> 1 │ [<Hello />];
│ ^^^^^^^^^
2 │
ℹ The order of the items may change, and having a key can help React identify which item was moved.
ℹ Check the React documentation.
data.map((x) => <Hello>{x}</Hello>);code-block.jsx:1:17 lint/correctness/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Missing key property for this element in iterable.
> 1 │ data.map((x) => <Hello>{x}</Hello>);
│ ^^^^^^^
2 │
ℹ The order of the items may change, and having a key can help React identify which item was moved.
ℹ Check the React documentation.
Valid
Section titled Valid[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];data.map((x) => <Hello key={x.id}>{x}</Hello>);How to configure
Section titled How to configure{ "linter": { "rules": { "correctness": { "useJsxKeyInIterable": "error" } } }}