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 React from 'react';

export class Hello extends React.Component {
  render() {
    return (
      <div onClick="console.log('clicked')"> {/* REACT_BAD_EVENT_HANDLER alarm */}
        Hello
      </div>
    );
  }
}

Compliant Code Example

import React from 'react';

export class Hello extends React.Component {
  handleClick() {
    console.log('clicked');
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        Hello
      </div>
    );
  }
}

Version

This rule was introduced in DeepScan 1.2.0-alpha.

See

• Handling Events

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