Event handler of a React element should not be a string

• REACT_BAD_EVENT_HANDLER
• Error
• High
• react

This rule applies when the event handler of a React element is specified with a string.

Unlike HTML, an event handler should be always a function in React. If you specify handler code as a string, React will throw an exception.

Noncompliant Code Example

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <div onClick="alert('clicked')"> {/* REACT_BAD_EVENT_HANDLER alarm */}
    Hello
  </div>
);

Compliant Code Example

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <div onClick={() => alert('clicked')}>
    Hello
  </div>
);

Version

This rule was introduced in DeepScan 1.2.0-alpha.

See

• Responding to Events

• React Error: Expected onClick listener to be a function, instead got a value of string type.