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