oxc-project/oxc · warning · OxcDiagnostic

Bad handler name

Error message

Bad handler name

What it means

Fallback message from the same react/jsx-handler-names rule, emitted when the prop key is an event-handler prop (on*) but no handler name could be extracted from the value (handler_name is None). Per the implementation this only happens for arrow functions when checkInlineFunction is enabled and get_event_handler_name_from_arrow_function returns None: the arrow has a block body (e.g. () => { handleChange() }) or its single-expression body is not an identifier/member-expression call. The diagnostic labels the arrow function body span.

Source

Thrown at crates/oxc_linter/src/rules/react/jsx_handler_names.rs:28

    },
};
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::{GetSpan, Span};
use oxc_str::{CompactStr, Ident};
use schemars::{
    JsonSchema, SchemaGenerator,
    schema::{Schema, SchemaObject, SubschemaValidation},
};
use serde_json::Value;

fn bad_handler_name_diagnostic(
    span: Span,
    prop_key: &str,
    handler_name: Option<&str>,
    handler_prefix: &str,
) -> OxcDiagnostic {
    OxcDiagnostic::warn(
        if let Some(handler_name) = handler_name {
            format!("Invalid handler name: {handler_name}")
        } else {
            "Bad handler name".to_string()
        },
    )
        .with_help(format!(
            "Handler function for {prop_key} prop key must be a camelCase name beginning with \'{handler_prefix}\' only"
        ))
        .with_label(span)
}

fn bad_handler_prop_name_diagnostic(
    span: Span,
    prop_key: &str,
    prop_value: Option<&str>,
    handler_prop_prefix: &str,
) -> OxcDiagnostic {

View on GitHub (pinned to e1e7af627c)

Solutions

1. Rewrite the inline handler as a single expression calling a properly named method: onChange={() => this.handleChange()}
2. Extract the block-bodied handler to a named handle-prefixed method/variable and pass it directly: onChange={this.handleChange}
3. Leave checkInlineFunction at its default false so inline arrow functions are not checked
4. Disable the rule if inline handler naming is not enforced on the team

Example fix

// before (checkInlineFunction: true)
<TestComponent onChange={() => { doSomethingOnChange(); }} />

// after
<TestComponent onChange={() => this.handleChange()} />

# check only inline-function handler naming
npx oxlint -D react/jsx-handler-names src/  # with checkInlineFunction enabled in .oxlintrc.json

When it happens

Trigger: Configuration { "checkInlineFunction": true } (plus checkLocalVariables: true, or a member-expression callee) combined with an on* prop whose value is an arrow function with a block body: <TestComponent onChange={() => { handleChange() }} />, or an expression-body arrow whose callee is not extractable (e.g. () => (fn || fallback)()). The rule cannot determine a name, so it reports the generic 'Bad handler name' with the requirement that it begin with the handler prefix.

Common situations: Porting an .eslintrc with checkInlineFunction/checkLocalVariables turned on to oxlint; codebases that inline multi-statement handlers in JSX; refactorings that changed a simple call arrow into a block-body arrow.

Related errors

• Invalid handler name: {handler_name}
• Invalid handler prop name: {prop_key}
• JSX component {component_name} must be in PascalCase or SCRE
• JSX component {component_name} must be in PascalCase
• `button` elements must have an explicit `type` attribute.

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