Why does React warn me against binding a component method to the object?

Question

I have this here component. I want to pass down a call handler to each listElement I create. If I do it like below, with bind(this), it works properly. The problem is that I get this warning from React in the console: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call.

var MyList = React.createClass({
  render: function () {
    var listElements = this.props.myListValues.map(function (val) {
      return (
        <ListElement onCallHandler={this.props.parentsCallHandler} val={val} />
        );
    }.bind(this));
    return (
      <ul>
          {listElements}
      </ul>
      );
  }
});

If I don't bind it, my children don't know about the call handler. What could I have done differently?

PS:

I know about destructuring assignments, like explained http://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx, but I don't want to use Harmony.

Answer 1

The error is coming from somewhere else in the code. You get the error when you do this.someFunction.bind(something) and something isn't null.

this.someFunction.bind({}, foo);    // warning
this.someFunction.bind(this, foo);  // warning, you're doing this
this.someFunction.bind(null, foo);  // okay!

Do a search for .bind(this in your code to find the offending line.

Answer 2

Here is updated docs example

React.createClass({
  onClick: function(event) {/* do something with this */},
  render: function() {
    return <button onClick={this.onClick} />;
  }
});

Update in ReactJS Docs