React click handlers and binding this

Question

I have a react component where I am iterating over a list and creating rows. In each row, there is a delete button. When the delete button is clicked, I want to pass a refer

Answer 1

You can do less verbose:

 R.td({}, R.button({onClick: this.onTagDelete.bind(this, tag.name), // BIND
                                className: "delete"}, "\u2716")),

Answer 2

I'm fairly new to react, but I figured I'd throw this out here to help.

I think you need to change this line,

R.td({}, R.button({onClick: function() {this.onTagDelete(tag.name)}.bind(this), // BIND
                            className: "delete"}, "\u2716")),

to

R.td({}, R.button({onClick: function() {this.onTagDelete.bind(this, tag.name)}, // BIND
                            className: "delete"}, "\u2716")),

I'm pretty sure that this should now pass the tag name to the function. Another way of getting data from the clicked subject is through refs, but with lists of items I don't think this works well because of repeated ref names. So I would just do what you are doing now.