Warning on bind component on children in ReactJS

Question

I am getting several Warnings on a Table with controls inside cells. If I click on a cell an event will occur. Some cells have a menu dropdown and an event depending on the selection. I am binding a value to the onClick event so that I can get a value in my function.

I am getting the following warnings on each of my rows:

Warning: bind(): React component methods may only be bound to the component instance.

My code looks like this:

  items = this.state.currentValues.map(function(itemVal) {
      return (
          <tr>
            <td  onClick={this.rowClick.bind(this, itemVal.OrderId)}>{itemVal.Customer}</td>
            <td  onClick={this.rowClick.bind(this, itemVal.OrderId)}>{itemVal.OrderId}</td>
            <td>
              <div> Flag To Group </div>
              <div>
                <Menu label={itemVal.User}>
                  <List onSelect={this.assignResponsibleUser.bind(this, itemVal.User)}>
                  </List>
                </Menu>
              </div>
          </td>
          </tr>
        );
    }.bind(this)
    );
    return(
        <Table selectable={true} scrollable={true} small={true}>
            <tr>
                {tableHeader}
            </tr>
            <tbody>
                {items}
            </tbody>
        </Table>
    );

I tried replacing:

onClick={this.rowClick.bind(this, itemVal.OrderId)}

with:

onClick={this.rowClick.bind(null, itemVal.OrderId)}

but it gives me the same warning.

I tried removing the .bind(this) but then it gives me an error because it cannot find the rowClick function.

How can I fix this issue?

Answer 1

Instead of using

this.array.map(function(){}.bind(this));

use

this.array.map(function(){}, this);

Its a map option for passing scope.

Answer 2

this.method mustbe a function such as:

senddel:function(id){
      this.props.onCommentDel(id);//parent callback
    },
    render: function() {
        return ( < div className = "commentList" >
            {this.props.data.map(function(comment){
                return (
                    <Comment key={comment.id} author={comment.author} onCommentDel={this.senddel.bind(this,comment.id)}>
                    {comment.text}
                    </Comment>
                )
            },this)}
    < /div>
    );
}