Clever Event Handlers in React

.jsx

class CustomComponent extends Component {

  handleClick = (i, str) => (e) => {
    ...
  };

  render() {
    return (
      <ul>
        {data.map((i) => (
          {/*
            higher order functions in cases where you need to pass index or other custom values over
            the traditional inline arrow func: `(e) => this.handleClick(i, 'someCustomValue', e)`
            inline binding, custom html attributes, and so forth...
          */}
          <li onClick={this.handleClick(i, 'someCustomValue')}>
            ...
          </li>
        )}
      </ul>
    );
  }
}