React collection listener bindings

complex_but_performant.js

var collection = [1, 2, 3, 4, 5, 6]

class B extends React.Component {
  onLinkClick = (info) => {
    alert(info)
  }

  render() {
    return (
      <div>
        {collection.map(n => 
          <Bb num={n} onLinkClick={this.onLinkClick} />
        )}
      </div>
    )
  }
}

class Bb extends React.Component {
  onClick = () => {
    this.props.onLinkClick(this.props.num)
  }

  render() {
    <a onClick={onClick} />
  }
}

simple_but_expensive.js

var collection = [1, 2, 3, 4, 5, 6]

class A extends React.Component {
  onLinkClick(info) {
    alert(info)
  }

  render() {
    return (
      <div>
        {collection.map(n => 
          <a onLinkClick={() => this.onLinkClick(n)} />
        )}
      </div>
    )
  }
}