Good practice for react-this-binding-issue

[astorije]

(Sorry this is not a bug report or feature request, but I figured it would be nice to have this listed somewhere on the repo)

Up until v6.0.0, we were gently riding on a bug of the react-this-binding-issue rule that was not seeing some violation. Imagine the following, minimal (as much as I could) example:

import React, { SFC } from 'react';
import { Checkbox } from 'my-theoretical-component-library';

interface CheckboxListProps {
  items: ReadonlyArray<{ name: string; selected: boolean }>;
  onChange(name: string, checked: boolean): void;
}

export const CheckboxList: SFC<CheckboxListProps> = ({ items, onChange }) => (
  <div>
    {items.map(({ name, selected }) => (
      <Checkbox
        checked={selected}
        key={name}
        label={name}
        onChange={checked => {
          onChange(name, checked);
        }}
      />
    ))}
  </div>
);

Prior to v6, TSLint was okay with that, but after the upgrade:

ERROR: 15:19   react-this-binding-issue  A new instance of an anonymous method is passed as a JSX attribute: checked => {
          onCha...

So, yeah, I am creating a new function each time.
What solution do you recommend for this type of violations (that we have across our codebase)?

As far as I can tell, I could

• Curry the onChange function to go onChange={onChange(name)} to trump the linter, but the underlying issue of creating a function each time would still be there, and that would make for a sillier API for whoever consumes this.
• Convert to a class, do this.onChange(checked) { return name => this.props.onChange(name, checked); } and use onChange={this.onChange}, which doesn't force the API to change, but I believe still creates plenty anonymous functions, and prevents us to use nice and small SFCs.
• Use tslint:disable, but that's just sad.
• Listen to my intoxicated coworker @amacleay who only half-jokingly suggests using memoizee+curry and use onChange={memoize(curry)(onChange, name)}.

Am I missing something nicer and easier to use that would make the linter happy?

[JoshuaKGoldberg]

Another quick workaround:

{items.map(({ name, selected }) => {
    const onChange = checked => {
        onChange(name, checked);
    };

    return (
      <Checkbox
        checked={selected}
        label={name}
        onChange={onChange}
      />
    );
})}

[astorije]

Right so the following works, but it's just to trump the linter really:

import React, { SFC } from 'react';
import { Checkbox } from 'my-theoretical-component-library';

interface CheckboxListProps {
  items: ReadonlyArray<{ name: string; selected: boolean }>;
  onChange(name: string, checked: boolean): void;
}

export const CheckboxList: SFC<CheckboxListProps> = ({ items, onChange }) => (
  <div>
    {items.map(({ name, selected }) => {
      const onChangeWithName = (checked: boolean) => {
        onChange(name, checked);
      };

      return (
        <Checkbox
          checked={selected}
          key={name}
          label={name}
          onChange={onChangeWithName}
        />
      );
    })}
  </div>
);

[JoshuaKGoldberg]

We've been talking about removing this from the recommended ruleset, since the rule is no longer really good practice (and debatably never was!). #309

For folks who discover this: @astorije is right, we can either do silly things to trump the linter or just... disable this relatively less useful rule!