src/content/docs/linter/rules/use-jsx-key-in-iterable.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.6.0` - Diagnostic Category: [`lint/correctness/useJsxKeyInIterable`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`react`](/linter/domains#react) - [`qwik`](/linter/domains#qwik) - Sources: - Same as [`react/jsx-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md) - Same as [`qwik/jsx-key`](https://qwik.dev/docs/advanced/eslint/#jsx-key){
"linter": {
"rules": {
"correctness": {
"useJsxKeyInIterable": "error"
}
}
}
}
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.
[<Hello />];
{items.map(item => <li>{item}</li>)}
[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];
{items.map(item => <li key={item.id}>{item}</li>)}
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.
{
"linter": {
"rules": {
"correctness": {
"useJsxKeyInIterable": {
"options": {
"checkShorthandFragments": true
}
}
}
}
}
}
data.map((x) => <>{x}</>);