react/jsx-key Correctness
What it does
Enforce key prop for elements in an array.
Why is this bad?
React requires a key prop for elements in an array to help identify which items have changed, are added, or are removed.
Examples
Examples of incorrect code for this rule:
[1, 2, 3].map((x) => <App />);
[1, 2, 3]?.map((x) => <ListItem />);Examples of correct code for this rule:
[1, 2, 3].map((x) => <App key={x} />);
[1, 2, 3]?.map((x) => <ListItem key={x} />);NOTE: This rule's option defaults differ from the defaults in the original ESLint plugin. It is recommended to keep all options set to true for correctness reasons, but you may want to set them back to false to get behavior parity when migrating from ESLint.
Configuration
This rule accepts a configuration object with the following properties:
checkFragmentShorthand
type: boolean
default: true
When true, check fragment shorthand <> for keys
checkKeyMustBeforeSpread
type: boolean
default: true
When true, require key prop to be placed before any spread props
warnOnDuplicates
type: boolean
default: true
When true, warn on duplicate key values
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/jsx-key": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/jsx-key": "error",
},
});oxlint --deny react/jsx-key --react-pluginVersion
This rule was added in v0.0.14.