useJsxKeyInIterable

JSX and TSX

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:
- react
Sources:
- Same as react/jsx-key

Description

Disallow 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

Invalid

1
[<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.

1
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

1
[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];
2
data.map((x) => <Hello key={x.id}>{x}</Hello>);

Options

checkShorthandFragments

React fragments can not only be created with <React.Fragment>, but also with shorthand fragments (<></>). To also check if those require a key, pass true to this option.

1
{
2
    "options": {
3
        "checkShorthandFragments": true
4
    }
5
}

1
data.map((x) => <>{x}</>);

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "useJsxKeyInIterable": "error"
6
      }
7
    }
8
  }
9
}