Pular para o conteúdo

useJsxKeyInIterable

Este conteúdo não está disponível em sua língua ainda.

Diagnostic Category: lint/correctness/useJsxKeyInIterable

Since: v1.6.0

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.

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

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