useJsxKeyInIterable (not released)

Diagnostic Category: lint/nursery/useJsxKeyInIterable

Source: jsx-key

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

[<Hello />, <Hello />, <Hello />];
data.map((x) => <Hello>{x}</Hello>);

nursery/useJsxKeyInIterable.js:1:2 lint/nursery/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Missing key property for this element in iterable.
  
  > 1 │ [<Hello />, <Hello />, <Hello />];
      │  ^^^^^^^^^
    2 │ data.map((x) => <Hello>{x}</Hello>);
    3 │ 
  
  ℹ The order of the items may change, and having a key can help React identify which item was moved.
  
  ℹ Check the React documentation. 
  
nursery/useJsxKeyInIterable.js:1:13 lint/nursery/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Missing key property for this element in iterable.
  
  > 1 │ [<Hello />, <Hello />, <Hello />];
      │             ^^^^^^^^^
    2 │ data.map((x) => <Hello>{x}</Hello>);
    3 │ 
  
  ℹ The order of the items may change, and having a key can help React identify which item was moved.
  
  ℹ Check the React documentation.

Valid

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