[New Rule]: no-unbound-method

[sampattuzzi]

This rule already exists in typescript-eslint but isn't detected in the context of JSX.

class MyComponent extends React.Component<{}, {}> {
  render() {
    return <button onClick={this.handleClick}>Click me!</button>;
    //                      ~~~~~~~~~~~~~~~~  passing unbound method
  }

  handleClick(e: any) {
    alert('You clicked!');
  }
}

The rule should warn about this usage and possible duplicated the functionality of the rule in typescript-eslint: https://typescript-eslint.io/rules/unbound-method

[ljharb]

The proper solution here, fwiw, is in the constructor, to do this.handleClick = this.handleClick.bind(this) - or, to do handleClick = this.handleClick.bind(this); as a class field right above the method.

Also, we already have the jsx-no-bind rule.