score:81

Accepted answer

the es6 way:

using arrow functions =>

const items = this.props.items.map((item) => (
  <ul key={item.id}>
    <li>
      <button onclick={() => this.displayalert(item.email)}>
        {item.lastname + ', ' + item.firstname}
      </button>
    </li>
  </ul>
));

onclick the anonymous function is called and executes this.displayalert(item.email)

the es5 way:

you could do this using .bind and passing the parameter in there.

you should also pass this or use bind to keep the proper context on your .map function:

var items = this.props.items.map(function(item) {
  return (
    <ul key={item.id}>
      <li>
        <button onclick={this.displayalert.bind(this, item.email)}>
          {item.lastname + ', ' + item.firstname}
        </button>
      </li>
    </ul>
  );
}, this);

shown in the example here: react - communicate between components

score:4

using arrow function and babel plugin "transform-class-properties"

class people extends react.component {
  render() {
    return (
      <ul>
        { this.props.items.map( (item) => (
          <li key={item.id}>
            <button onclick={this.displayalert(item)}>
              {item.lastname + ', ' + item.firstname}
            </button>
          </li>
        ))}
      </ul>
    )
  }

  displayalert = (item) => (event) => {
    // you can access the item object and the event object
    alert('hi');
  }
}

Related Query

More Query from same tag