index.js

class Nav extends React.Component {
  constructor() {
    super();
    this.onNav = this.onNav.bind(this);
  }
  onNav(idx) {
    // do something with `this` and `idx`
  }
  render() {
    return (
      <ul>
        {btns.map((btn, i) => <Button key={btn} onClick={this.onNav} idx={i}>{btn}</Button>)}
      </ul>
    );
  }
}

class Button extends React.Component {
  shouldComponentUpdate(nextProps) {
    return !shallowEqual(nextProps, this.props);
  }
  render() {
    const { onClick, idx, children } = this.props;
    return <button onClick={() => onClick(idx)}>{children}</button>;
  }
}

Could you do something like:

onNav(idx) {
  return function() {
   // do something with `this` and `idx`
  };
}


....


{btns.map((btn, i) => <Button key={btn} onClick={this.onNav(i)}>{btn}</Button>)}

And that way you don't need to pass idx to the <Button> component?

Nope, that won't work because `onNav()`` is returning a new function on every call anyway.

@hccampos is this what the author means by don't partially apply when passing them to components?

@roman01la eslint with enabled jsx-no-bind rule does not allow syntax at line 24 as well:
return <button onClick={() => onClick(idx)}>{children}</button>;

Is it ok in such cases?

@adaniliuk I believe so in this case. You aren't creating a new function.