{"record":{"id":"941009166a310fd8","repo":"oxc-project/oxc","slug":"invalid-handler-name-handler-name","errorCode":null,"errorMessage":"Invalid handler name: {handler_name}","messagePattern":"Invalid handler name: (.+?)","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/react/jsx_handler_names.rs","lineNumber":28,"sourceCode":"    },\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::{GetSpan, Span};\nuse oxc_str::{CompactStr, Ident};\nuse schemars::{\n    JsonSchema, SchemaGenerator,\n    schema::{Schema, SchemaObject, SubschemaValidation},\n};\nuse serde_json::Value;\n\nfn bad_handler_name_diagnostic(\n    span: Span,\n    prop_key: &str,\n    handler_name: Option<&str>,\n    handler_prefix: &str,\n) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\n        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 {","sourceCodeStart":10,"sourceCodeEnd":46,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/react/jsx_handler_names.rs#L10-L46","documentation":"Diagnostic from the oxlint rule react/jsx-handler-names (crates/oxc_linter/src/rules/react/jsx_handler_names.rs). It fires when a JSX attribute whose prop key is an event-handler prop (matches the eventHandlerPropPrefix regex, default ^on[A-Z].*) is bound to a handler function whose name does not match the handler regex ^((.*\\.)?handle)[0-9]*[A-Z].*$ (default eventHandlerPrefix \"handle\"). The rule exists to keep prop/handler naming symmetric (onChange -> handleChange) for readability and maintainability. It is a lint warning, not a runtime error.","triggerScenarios":"A JSX attribute like key=\"onChange\" (or any key matching the configured eventHandlerPropPrefix) whose value expression fails the handler-name regex: <TestComponent onChange={this.doSomethingOnChange} /> (member expression, checked by default), this.handle (no uppercase after prefix), this.handle4change (lowercase after prefix), this.props.obj.onChange, a local identifier like takeCareOfChange (requires checkLocalVariables: true), or an arrow call like () => this.takeCareOfChange() (requires checkInlineFunction: true). Custom prefixes set via eventHandlerPrefix (pipe-separated list or false) change what matches.","commonSituations":"Teams migrating from eslint-plugin-react with a different convention (e.g. handlers named onFoo, requiring eventHandlerPrefix: \"handle|on\"); class components passing this.props.obj.onChange chains; enabling checkLocalVariables/checkInlineFunctions to match an old .eslintrc and suddenly seeing many new reports; third-party components with proprietary prop names that need ignoreComponentNames.","solutions":["Rename the handler so it starts with the configured prefix followed by an uppercase letter, e.g. this.handleChange / handle123Change","If your convention differs, set eventHandlerPrefix in .oxlintrc.json (pipe-separated alternatives such as \"handle|on\", or false to disable handler-name checking)","Pass props through instead: this.props.onFoo / props.onChange values are accepted as-is by the rule","Add the offending element to ignoreComponentNames (supports globs like \"MyLib*\") when it is a third-party component you cannot rename","Disable the rule for the file or project if the naming convention is not enforced"],"exampleFix":"// before\n<TestComponent onChange={this.doSomethingOnChange} />\n<TestComponent onChange={takeCareOfChange} />  // with checkLocalVariables: true\n\n// after\n<TestComponent onChange={this.handleChange} />\n<TestComponent onChange={handleChange} />","handlingStrategy":"validation","validationCode":"# fail CI before merge when handler names violate the convention\nnpx oxlint -D react/jsx-handler-names src/","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Standardize on onX prop / handleX handler naming and enforce it via react/jsx-handler-names in .oxlintrc.json from day one","Document non-default prefixes (eventHandlerPrefix / eventHandlerPropPrefix, pipe-separated) in the repo's lint config so new code matches","List third-party components with proprietary prop APIs in ignoreComponentNames instead of disabling the rule everywhere"],"tags":["react","jsx","naming-convention","event-handler","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"}