oxc-project/oxc · warning · OxcDiagnostic

"key" prop must be placed before any `{...spread}`

Error message

"key" prop must be placed before any `{...spread}`

What it means

react/jsx-key diagnostic controlled by the checkKeyMustBeforeSpread option (default TRUE in oxlint — intentionally stricter than eslint-plugin-react, whose default is false). It fires when a 'key' attribute is written after a {...spread} attribute in the same JSX opening element. With React's new JSX transform, later spread props overwrite previously-set attributes, so <div key="a" {...props}/> would have its key silently dropped; the key must come before any spread.

Source

Thrown at crates/oxc_linter/src/rules/react/jsx_key.rs:44

};

const TARGET_METHODS: [&str; 3] = ["flatMap", "from", "map"];

fn missing_key_prop_for_element_in_array(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(r#"Missing "key" prop for element in array."#).with_label(span)
}

fn missing_key_prop_for_element_in_iterator(iter_span: Span, el_span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(r#"Missing "key" prop for element in iterator."#)
        .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)."#)
        .with_labels([
            iter_span.label("Iterator starts here."),
            el_span.label("Element generated here."),
        ])
}

fn key_prop_must_be_placed_before_spread(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(r#""key" prop must be placed before any `{...spread}`"#)
        .with_help("To avoid conflicting with React's new JSX transform: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html")
        .with_label(span)
}

fn duplicate_key_prop(key_value: &str, span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(format!("Duplicate key '{key_value}' found in JSX elements"))
        .with_help("Each child in a list should have a unique 'key' prop")
        .with_label(span)
}

#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]
#[schemars(transparent)]
pub struct JsxKey(Box<JsxKeyConfig>);

#[derive(Debug, Default, Clone, Serialize, Deserialize, JsonSchema)]
#[serde(rename_all = "camelCase", default, deny_unknown_fields)]
pub struct JsxKeyConfig {
    /// When true, require key prop to be placed before any spread props

View on GitHub (pinned to e1e7af627c)

Solutions

1. Move the key attribute before the spread: <Component key={id} {...props}/>
2. Alternatively remove the separate key and pass it inside the spread object if that object is constructed for this element
3. If you must match old eslint-plugin-react behavior, set { "rules": { "react/jsx-key": ["error", { "checkKeyMustBeforeSpread": false }] } } in .oxlintrc.json
4. Verify with the React 17+ automatic transform that keys are no longer being dropped after fixing

Example fix

// before
<Component {...props} key={item.id} />

// after
<Component key={item.id} {...props} />

npx oxlint -D react/jsx-key src/  # checkKeyMustBeforeSpread defaults to true in oxlint

When it happens

Trigger: <Component {...props} key={id}/>; also key appearing after any JSXSpreadAttribute, e.g. <div {...rest} key='row'/>. Only when checkKeyMustBeforeSpread is true (the default), and only when a literal key attribute follows a spread attribute.

Common situations: Forwarding props with {...rest} while adding a key; code written for the classic JSX transform where ordering did not matter; migrating a codebase to the automatic runtime (react/jsx-runtime) where this ordering becomes load-bearing.

Related errors

• Missing "key" prop for element in array.
• Missing "key" prop for element in iterator.
• Duplicate key '{key_value}' found in JSX elements
• all spread attributes are treated as if they contain an unsa
• `button` elements must have an explicit `type` attribute.

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/cec032d0601bb6f2. Report an issue: GitHub.