How to pass arguments to functions in React js?

Question

I want to display person's email in the alert window. But, I do not know how to pass email as arguments to displayAlert method. Also, it wont let me use either. So, I have to assign displayAlert methos to a variable and use it in onClick. I do not know why it wont let me call it directly.

class People extends React.Component{
render (){
        var handleClick = this.displayAlert;
        var items = this.props.items.map(function(item) {
            return(
                <ul key = {item.id}>
                    <li>
                        <button onClick= {handleClick}>{item.lastName + ', ' + item.firstName}</button>
                    </li>
                </ul>
            )
        });
        return (<div>{items}</div>);
 }

displayAlert (){
    alert('Hi');
}
}

 class PersonList extends React.Component{
     render () {
        return (
    <div>
        <People items={this.props.people}/> /* People is an array of people*/
    </div>
    );
  }
}

Austin Greco · Accepted Answer · 2016-08-19 18:16:53Z

83

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

edited Aug 19, 2016 at 18:16

answered Jun 2, 2015 at 23:56

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kayote Over a year ago

Please do not create functions within component props. See: stackoverflow.com/a/36677798/434697

Hernán Albertario Over a year ago

Using an arrow function you're creating a new function each time, which has performance effects

miguel savignano · Accepted Answer · 2017-04-01 19:19:13Z

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');
  }
}

answered Apr 1, 2017 at 19:19

miguel savignano

1,15913 silver badges9 bronze badges

1 Comment

Siddharth Sachdeva Over a year ago

What if I want to add to pass another object let say a string along with item?

Collectives™ on Stack Overflow

How to pass arguments to functions in React js?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related