Passing parameter in ReactJS onclick

Question

I have this React component that has items generated from a list (with a map function). Each of those elements has a button. I want this button's onclick button to pass in a parameter to identify which list item's button was clicked.

It looks something like this.

var Component = React.createClass({
    assignItem: function(item){
        this.setState({item:item})
    },
    render: function(){
        var listItems = list.map(function(item){
        return <div>{item}
        <button onClick={this.assignItem(item)>Click</button>
        </div>
        })
        return <div>{listItems}</div>
    }
})

Of course that doesn't work. The error message says that this.assignItem is not a function. I know the official React documentation suggests this:

var handleClick = function(i, props) {
  console.log('You clicked: ' + props.items[i]);
}

function GroceryList(props) {  
  return (
    <div>
  {props.items.map(function(item, i) {
    return (
      <div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div>
    );
  })}
</div>
  );
}
ReactDOM.render(
   <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
);

but that works with a function outside of the component. Since I want my function to manipulate the sate, I want to keep it within the React component.

How do I do this?

Aaron Beall · Accepted Answer · 2017-10-23 17:39:54Z

15

Original accepted answer:

You can bind to a function on this just like the React example, however since you are rendering in a map callback you need to either pass in thisArg or use a fat arrow function:

var Component = React.createClass({
    assignItem: function(item){
        this.setState({item:item})
    },
    render: function(){
        // bind to this.assignItem
        var listItems = list.map(function(item){
            return <div>{item}
                <button onClick={this.assignItem.bind(this, item)}>Click</button>
            </div>
        }, this); // pass in this, or use fat arrow map callback
        return <div>{listItems}</div>
    }
})

Update 2017:

This is an old question using an old React API and an accordingly old answer. Today you should be using the class or functional React component API. For passing arguments to click handlers you can just write an inline fat arrow function and call through with whatever params you want. The above example ends up like this:

class MyComponent extends React.Component { // or React.PureComponent
    assignItem = item => { // bound arrow function handler
        this.setState({ item: item });
    }
    render() {
        var listItems = list.map(item => {
            // onClick is an arrow function that calls this.assignItem
            return <div>{item}
                <button onClick={e => this.assignItem(item)}>Click</button>
            </div>
        });
        return <div>{ listItems }</div>
    }
}

Note: The assignItem handler must be bound, which is done here using an arrow function as a class property.

edited Oct 23, 2017 at 17:39

answered Apr 11, 2016 at 19:07

Aaron Beall

52.6k26 gold badges91 silver badges109 bronze badges

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

2 Comments

yerassyl Over a year ago

@MariePelletier, what if I am returning <a> tag, so I also need to preventDefault. How do I pass event to assignItem? Or should I just always use <button> for such cases

Aaron Beall Over a year ago

bind will prepend arguments but still pass the original arguments, so assignItem can take a second event arg as function(item, event) and call event.preventDefault().

Collectives™ on Stack Overflow

Passing parameter in ReactJS onclick

1 Answer 1

Original accepted answer:

Update 2017:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Original accepted answer:

Update 2017:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related