{"record":{"id":"85313cd29465b76c","repo":"oxc-project/oxc","slug":"duplicate-key-key-value-found-in-jsx-elements","errorCode":null,"errorMessage":"Duplicate key '{key_value}' found in JSX elements","messagePattern":"Duplicate key '(.+?)' found in JSX elements","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"error","filePath":"crates/oxc_linter/src/rules/react/jsx_key.rs","lineNumber":50,"sourceCode":"}\n\nfn missing_key_prop_for_element_in_iterator(iter_span: Span, el_span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(r#\"Missing \"key\" prop for element in iterator.\"#)\n        .with_help(r#\"Add a \"key\" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).\"#)\n        .with_labels([\n            iter_span.label(\"Iterator starts here.\"),\n            el_span.label(\"Element generated here.\"),\n        ])\n}\n\nfn key_prop_must_be_placed_before_spread(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(r#\"\"key\" prop must be placed before any `{...spread}`\"#)\n        .with_help(\"To avoid conflicting with React's new JSX transform: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html\")\n        .with_label(span)\n}\n\nfn duplicate_key_prop(key_value: &str, span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\"Duplicate key '{key_value}' found in JSX elements\"))\n        .with_help(\"Each child in a list should have a unique 'key' prop\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]\n#[schemars(transparent)]\npub struct JsxKey(Box<JsxKeyConfig>);\n\n#[derive(Debug, Default, Clone, Serialize, Deserialize, JsonSchema)]\n#[serde(rename_all = \"camelCase\", default, deny_unknown_fields)]\npub struct JsxKeyConfig {\n    /// When true, require key prop to be placed before any spread props\n    #[serde(default = \"default_true\")]\n    pub check_key_must_before_spread: bool,\n    /// When true, warn on duplicate key values\n    #[serde(default = \"default_true\")]\n    pub warn_on_duplicates: bool,\n    /// When true, check fragment shorthand `<>` for keys","sourceCodeStart":32,"sourceCodeEnd":68,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/react/jsx_key.rs#L32-L68","documentation":"react/jsx-key diagnostic emitted when the warnOnDuplicates option is true (the default in oxlint, again stricter than eslint-plugin-react) and two sibling elements — children of one JSX element/fragment, or elements within one array literal — carry the same key value. Duplicate keys break React's assumption that keys uniquely identify siblings, which can cause state to attach to the wrong component when lists reorder. The help text reminds that each child in a list should have a unique key.","triggerScenarios":"Two children with key=\"same\" on one parent: <><Row key=\"a\"/><Row key=\"a\"/></>; a map whose callback returns a constant key (items.map(i => <Row key=\"x\"/>)); hardcoded keys copy-pasted across branches (key=\"item\" in both a ternary's arms); duplicate keys among JSX elements in one array expression.","commonSituations":"Copy-pasted list branches; keys derived from a non-unique field (name instead of id); index-based keys colliding with literal keys after a refactor; data genuinely containing duplicate ids that must be disambiguated with a prefix/suffix.","solutions":["Give every sibling a unique key, ideally derived from a stable id: <Row key={item.id}/>","If the data has duplicate ids, compose a unique key: key={`${item.id}-${index}`} or key={`${section}-${item.id}`}","Fix map callbacks that return constant or copy-pasted keys","If migrating from ESLint and you want the old behavior, set warnOnDuplicates: false in the jsx-key options of .oxlintrc.json"],"exampleFix":"// before\n{items.map(i => <Row key=\"row\" data={i}/>)}\n\n// after\n{items.map(i => <Row key={i.id} data={i}/>)}","handlingStrategy":"validation","validationCode":"npx oxlint -D react/jsx-key src/  # warnOnDuplicates defaults to true in oxlint","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Derive keys from stable unique ids, never constants or copy-pasted strings","When data ids can repeat, compose the key (e.g. `${section}-${id}`) instead of using the raw id","React DevTools highlights duplicate sibling keys — check it when lists misbehave"],"tags":["react","jsx","list-key","duplicate-key","reconciliation","oxlint","lint"],"backgroundTag":"react-duplicate-list-key","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}