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>;
  }
}

@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.