React: Retrieve dynamic child key upon event

Question

I am aware that dynamic children of a component must have a unique key as the following (modified example from official docs):

Answer 1

Although the first answer is correct this is considered as a bad practice since:

A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary.

Better way:

var List = React.createClass({
  handleClick (id) {
    console.log('yaaay the item key was: ', id)
  }

  render() {
    return (
      

        {this.props.items.map(item =>
          
        )}
      
    );
  }
});

var ListItem = React.createClass({
  render() {
    return (
      

        ...
      
    );
  },
  _onClick() {
    this.props.onItemClick(this.props.item.id);
  }
});

Source: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md