# react/jsx-handler-names

> Enforce naming conventions for event handlers and the props they are passed to

In a common React convention, a prop that takes an event handler starts with `on`, and the function that handles the event starts with `handle`. The rule reports an `on` prop that gets a function with another name, and a `handle` function that's passed to a prop with another name. Passing a prop through, as in `onBlur={props.onBlur}`, is fine.

By default the rule only checks members such as `this.handleChange`. It skips local variables and inline functions, and it never checks `ref`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/jsx-handler-names" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/jsx-handler-names" = ["error", {
  eventHandlerPrefix = "handle",
  eventHandlerPropPrefix = "on",
  checkLocalVariables = false,
  checkInlineFunction = false,
  ignoreComponentNames = [], # list of strings
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 2} */}
```jsx
class Form extends React.Component {
  render() {
    return <Input onChange={this.updateName} blur={this.handleBlur} />;
  }
}
```

Not reported:

{/* good */}
```jsx
class Form extends React.Component {
  render() {
    return (
      <Input
        onChange={this.handleChange}
        onBlur={this.props.onBlur}
        onFocus={() => this.track("focus")}
        ref={this.handleRef}
      />
    );
  }
}
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `eventHandlerPrefix` | `"handle"` | The prefix for a handler function. |
| `eventHandlerPropPrefix` | `"on"` | The prefix for a prop that takes a handler. |
| `checkLocalVariables` | `false` | Also check handlers that are plain variables, such as `onChange={updateName}`. |
| `checkInlineFunction` | `false` | Also check the function that an arrow function calls, such as `onChange={() => this.updateName()}`. |
| `ignoreComponentNames` | `[]` | Components to skip. A name can be a glob pattern. |

Function components keep their handlers in local variables, so they need `checkLocalVariables`:

{/* bad {"options": [{"checkLocalVariables": true}]} */}
```jsx
function Form() {
  const updateName = event => setName(event.target.value);
  return <Input onChange={updateName} />;
}
```

{/* good {"options": [{"checkLocalVariables": true}]} */}
```jsx
function Form() {
  const handleChange = event => setName(event.target.value);
  return <Input onChange={handleChange} />;
}
```

With `checkInlineFunction`:

{/* bad {"options": [{"checkInlineFunction": true}]} */}
```jsx
const field = <Input onChange={() => this.updateName()} />;
```

With other prefixes, here `"do"` and `"when"`:

{/* bad {"options": [{"eventHandlerPrefix": "do", "eventHandlerPropPrefix": "when"}]} */}
```jsx
const field = <Input whenChange={this.handleChange} />;
```

With `ignoreComponentNames` set to `["Legacy*"]`:

{/* good {"options": [{"ignoreComponentNames": ["Legacy*"]}]} */}
```jsx
const field = <LegacyInput onChange={this.updateName} />;
```

Either prefix can also be `false`. Both checks need both prefixes, so that turns the whole rule off:

{/* good {"options": [{"eventHandlerPropPrefix": false}]} */}
```jsx
const field = <Input onChange={this.updateName} blur={this.handleBlur} />;
```

{/* good {"options": [{"eventHandlerPrefix": false}]} */}
```jsx
const field = <Input onChange={this.updateName} blur={this.handleBlur} />;
```