{"record":{"id":"3df8f299623778d0","repo":"oxc-project/oxc","slug":"please-provide-an-explicit-key-value-using-key","errorCode":null,"errorMessage":"Please provide an explicit key value. Using \\\"key\\\" as a shorthand for \\\"key={true}\\\" is not allowed.","messagePattern":"Please provide an explicit key value\\. Using \\\\\"key\\\\\" as a shorthand for \\\\\"key=(.+?)\\\\\" is not allowed\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_transformer/src/jsx/diagnostics.rs","lineNumber":44,"sourceCode":"        .with_help(\"Remove `importSource` option.\")\n}\n\n#[cold]\n#[expect(dead_code)]\npub fn invalid_import_source() -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"importSource cannot be an empty string or longer than u32::MAX bytes\")\n        .with_help(\"Fix `importSource` option.\")\n}\n\n#[cold]\npub fn namespace_does_not_support(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.\")\n        .with_label(span)\n}\n\n#[cold]\npub fn valueless_key(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Please provide an explicit key value. Using \\\"key\\\" as a shorthand for \\\"key={true}\\\" is not allowed.\")\n        .with_label(span)\n}\n","sourceCodeStart":26,"sourceCodeEnd":47,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_transformer/src/jsx/diagnostics.rs#L26-L47","documentation":"During the JSX transform, Oxc warns when it encounters a JSX attribute named `key` with no value, e.g. `<div key />`. Unlike boolean-ish HTML attributes, React assigns special meaning to `key` and requires an explicit value; `key` alone does NOT mean `key={true}`. The check lives in the attribute loop of `get_create_element_arguments` at crates/oxc_transformer/src/jsx/jsx_impl.rs:635-637: when the attribute name is the identifier `key` and `value.is_none()`, the `valueless_key` diagnostic (jsx/diagnostics.rs:44) is reported. In automatic runtime mode a valued `key` is hoisted to the third argument of `jsx()`; a valueless one cannot be.","triggerScenarios":"Transforming JSX that contains `<Component key />` or `<li key />` with the JSX plugin enabled (any runtime, classic or automatic — the check runs before the runtime branch). The diagnostic fires per valueless `key` attribute; everything else about the element is still transformed.","commonSituations":"Copy-pasting list markup where `key` was written like a boolean HTML attribute (`<li key>` next to `<li disabled>`); refactoring template code and deleting the `key={item.id}` expression but leaving the attribute name; muscle memory from frameworks where bare attributes are truthy flags. Mirrors React/Babel's own 'key={true}' rejection so behavior parity is expected.","solutions":["Give the key an explicit stable value: `<Component key={item.id} />`","If the key is genuinely constant, write `<Component key=\"k\" />` or `key={true}` explicitly as a string/literal","Remove the `key` attribute entirely if the element is not in a list and React does not need to track it"],"exampleFix":"// before\n{items.map(item => <Row key />)}\n\n// after\n{items.map(item => <Row key={item.id} />)}","handlingStrategy":"validation","validationCode":"// Catch bare `key` attributes before running the transform\nfunction hasValuelessKey(src: string): boolean {\n  return /<[^>]*\\skey(?:\\s|=\\s*\\{\\s*\\})?[\\s/>]/.test(src) && /\\skey(?![=\\w])/.test(src);\n}\n// or structurally: parse and walk JSXAttribute { name: 'key', value: null }","typeGuard":"// Component-level guard in app code: require a usable key value\nfunction safeKey(v: string | number | undefined): string | number {\n  if (v === undefined || v === null) throw new Error('key requires an explicit value');\n  return v;\n}","tryCatchPattern":null,"preventionTips":["Always write keys as `key={stableId}` — never as a bare attribute","Enable editor linting (react/jsx-key style rules) so list items missing key values are flagged at authoring time","In codemods that strip expressions, delete the whole `key` attribute, not just its initializer"],"tags":["oxc","jsx","react","key","transformer"],"backgroundTag":"react-key-prop-misuse","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"}