{"record":{"id":"fd7932a89c66ab58","repo":"oxc-project/oxc","slug":"invalid-handler-prop-name-prop-key","errorCode":null,"errorMessage":"Invalid handler prop name: {prop_key}","messagePattern":"Invalid handler prop name: (.+?)","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/react/jsx_handler_names.rs","lineNumber":47,"sourceCode":"        if let Some(handler_name) = handler_name {\n            format!(\"Invalid handler name: {handler_name}\")\n        } else {\n            \"Bad handler name\".to_string()\n        },\n    )\n        .with_help(format!(\n            \"Handler function for {prop_key} prop key must be a camelCase name beginning with \\'{handler_prefix}\\' only\"\n        ))\n        .with_label(span)\n}\n\nfn bad_handler_prop_name_diagnostic(\n    span: Span,\n    prop_key: &str,\n    prop_value: Option<&str>,\n    handler_prop_prefix: &str,\n) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\"Invalid handler prop name: {prop_key}\"))\n        .with_help(if let Some(prop_value) = prop_value {\n            format!(\"Prop key for {prop_value} must begin with \\'{handler_prop_prefix}\\'\")\n        } else {\n            format!(\"Prop key must begin with \\'{handler_prop_prefix}\\'\")\n        })\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct JsxHandlerNames(Box<JsxHandlerNamesConfig>);\n\n#[derive(Debug, Clone, JsonSchema)]\n#[serde(rename_all = \"camelCase\", default, deny_unknown_fields)]\npub struct JsxHandlerNamesConfig {\n    /// Whether to check for inline functions in JSX attributes.\n    #[serde(rename = \"checkInlineFunction\")]\n    check_inline_functions: bool,\n    /// Whether to check for local variables in JSX attributes.","sourceCodeStart":29,"sourceCodeEnd":65,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/react/jsx_handler_names.rs#L29-L65","documentation":"Third diagnostic of react/jsx-handler-names, the mirror case of the handler-name check: the value IS a correctly named handler (matches ^((.*\\.)?handle)[0-9]*[A-Z].*$), but the JSX prop key itself is not an event-handler prop name (does not match the eventHandlerPropPrefix regex, default ^on[A-Z].*). The rule wants handler-valued props to be named onX, e.g. <MyComponent onChange={this.handleChange} /> instead of <MyComponent handleChange={this.handleChange} />. Member-expression values (this.handleChange, x.handleFoo) are checked even with the default config because checkLocalVariables/checkInlineFunction only gate identifiers and arrows.","triggerScenarios":"Any JSX attribute whose value resolves to a handle-prefixed function while the key lacks the 'on' prefix: <TestComponent only={this.handleChange} />, <TestComponent handleChange={this.handleChange} />, or with checkLocalVariables: true, <TestComponent whenChange={handleChange} />. Custom eventHandlerPropPrefix (e.g. \"when|on\" or false to disable prop-name checking) changes which keys pass.","commonSituations":"Components exposing handleX-style props by mistake; teams whose prop convention is not 'on'-prefixed (must reconfigure eventHandlerPropPrefix or set it to false); migrating a codebase that only ever used the handler-name half of the rule.","solutions":["Rename the prop key to the on-prefixed form: <MyComponent onChange={this.handleChange} />","If your prop naming convention differs, set eventHandlerPropPrefix in .oxlintrc.json to your prefix (pipe-separated list such as \"when|on\")","Set eventHandlerPropPrefix: false to stop checking prop-key names entirely while still checking handler names","Add the component to ignoreComponentNames if it is a third-party component with a fixed API"],"exampleFix":"// before\n<TestComponent handleChange={this.handleChange} />\n<TestComponent only={this.handleChange} />\n\n// after\n<TestComponent onChange={this.handleChange} />","handlingStrategy":"validation","validationCode":"npx oxlint -D react/jsx-handler-names src/","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Name handler-valued props with the on prefix (onChange, onClick) so props and handlers stay symmetric","If the component library uses a different prop prefix, set eventHandlerPropPrefix once in config rather than sprinkling disables","Review new component APIs for accidentally exposing handleX-style props"],"tags":["react","jsx","naming-convention","event-handler","props","oxlint","lint"],"backgroundTag":"react-event-handler-naming","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}