How to pass arguments to functions in React js?

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)