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
- qwik
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.

This rule is intended for use in both React and Qwik applications to prevent missing key props in JSX elements inside iterators.

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
{items.map(item => <li>{item}</li>)}

code-block.jsx:1:20 lint/correctness/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Missing key property for this element in iterable.
  
  > 1 │ {items.map(item => <li>{item}</li>)}
      │                    ^^^^
    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
{items.map(item => <li key={item.id}>{item}</li>)}

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
}