Skip to content
Biome
Docs Blog Playground

useJsxKeyInIterable (since v1.6.0)

Diagnostic Category: lint/correctness/useJsxKeyInIterable

Sources:

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

Section titled Examples

Invalid

Section titled Invalid
[<Hello />];
correctness/useJsxKeyInIterable.js: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>);
correctness/useJsxKeyInIterable.js: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>);
Section titled Related links