# solid/event-handlers
Enforce naming DOM element event handlers consistently and prevent Solid's analysis from misunderstanding whether a prop should be an event handler.
This rule is **a warning** by default.
[View source](../src/rules/event-handlers.ts) ยท [View tests](../test/rules/event-handlers.test.ts)
See [this issue](https://github.com/solidjs-community/eslint-plugin-solid/issues/23) for rationale.
## Rule Options
Options shown here are the defaults.
```js
{
"solid/event-handlers": ["warn", {
// if true, don't warn on ambiguously named event handlers like `onclick` or `onchange`
ignoreCase: false,
// if true, warn when spreading event handlers onto JSX. Enable for Solid < v1.6.
warnOnSpread: false,
}]
}
```
## Tests
### Invalid Examples
These snippets cause lint errors, and some can be auto-fixed.
```js
let el = ;
let el =
{}} />;
let el =
{}} />;
// after eslint --fix:
let el =
{}} />;
let el =
{}} />;
// after eslint --fix:
let el =
{}} />;
let el =
{}} />;
// after eslint --fix:
let el =
{}} />;
let el = ;
let el = ;
let el = ;
let el = ;
const string = "string";
let el = ;
let el =
{}} />;
// after eslint --fix:
let el =
{}} />;
let el =
{}} />;
// after eslint --fix:
let el =
{}} />;
let el =
{}} />;
// after eslint --fix:
let el =
{}} />;
/* eslint solid/event-handlers: ["error", { "warnOnSpread": true }] */
const handleClick = () => 42;
let el = ;
// after eslint --fix:
const handleClick = () => 42;
let el = ;
/* eslint solid/event-handlers: ["error", { "warnOnSpread": true }] */
const handleClick = () => 42;
let el = ;
// after eslint --fix:
const handleClick = () => 42;
let el = ;
/* eslint solid/event-handlers: ["error", { "warnOnSpread": true }] */
const handleClick = () => 42;
let el = ;
// after eslint --fix:
const handleClick = () => 42;
let el = ;
let el =
setCount(1)} />;
// after eslint --fix:
let el =
setCount(1)} />;
let el =
{}} />;
// after eslint --fix:
let el =
{}} />;
let el =
{}} />;
let el = ;
let el =
{}} />;
// after eslint --fix:
let el =
{}} />;
```
### Valid Examples
These snippets don't cause lint errors.
```js
const onfoo = () => 42;
let el = ;
const string = "string" + some_func();
let el = ;
function Component(props) {
return ;
}
function Component(props) {
return ;
}
let el =
{}} />;
let el =
{}} />;
let el =
{}} />;
let el = ;
let el =
{}} />;
const onClick = () => 42;
let el = ;
/* eslint solid/event-handlers: ["error", { "ignoreCase": true }] */
let el = ;
/* eslint solid/event-handlers: ["error", { "ignoreCase": true }] */
let el = ;
let el =