---
url: /docs/guide/usage/linter/rules/react/jsx-handler-names.md
---

### What it does

Ensures that any component or prop methods used to handle events are correctly prefixed.

### Why is this bad?

Inconsistent naming of event handlers and props can reduce code readability and maintainability.

### Examples

Examples of **incorrect** code for this rule:

```jsx
<MyComponent handleChange={this.handleChange} />
<MyComponent onChange={this.componentChanged} />
```

Examples of **correct** code for this rule:

```jsx
<MyComponent onChange={this.handleChange} />
<MyComponent onChange={this.props.onFoo} />
```

## Configuration

This rule accepts a configuration object with the following properties:

### checkInlineFunction

type: `boolean`

default: `false`

Whether to check for inline functions in JSX attributes.

### checkLocalVariables

type: `boolean`

default: `false`

Whether to check for local variables in JSX attributes.

### eventHandlerPrefix

type: `string | boolean`

default: `"handle"`

Event handler prefixes to check against.

### eventHandlerPropPrefix

type: `string | boolean`

default: `"on"`

Event handler prop prefixes to check against.

### ignoreComponentNames

type: `string[]`

default: `[]`

Component names to ignore when checking for event handler prefixes.

## How to use

## Version

This rule was added in v1.13.0.

## References