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.

By "call handler" do you mean event handler? Events should bubble up to the parent and can be captured there. What am I missing? — Evan Davis
– Evan Davis, Commented Nov 6, 2014 at 18:35

JMM · Accepted Answer · 2015-10-06 14:03:03Z

31

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.

edited Oct 6, 2015 at 14:03

JMM

26.9k3 gold badges54 silver badges56 bronze badges

answered Nov 6, 2014 at 19:02

Brigand

86.4k20 gold badges168 silver badges174 bronze badges

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

3 Comments

andersem Over a year ago

Oh, you're right, it was somewhere else. I'm embarrassed now

JMM Over a year ago

@FakeRainBrigand It seems that it now doesn't warn in the second case, .bind(this, foo). It does with .bind(this). Tested with [email protected]. jsfiddle.net/69z2wepo/17453 And the docs currently show doing just that: facebook.github.io/react/tips/…. This story of when to bind and when not to in React seems perhaps overly complicated.

Alan Dong Over a year ago

The reason why .bind(null, works is that, since react autobinds since v0.4, by doing .bind(null, we are essentiall execute this.methond.bind(this).bind(null, arg1, arg2). Just thought some of you may want to know why it worked.

Upworks · Accepted Answer · 2015-03-07 20:29:18Z

4

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

answered Mar 7, 2015 at 20:29

Upworks

2672 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related