React and data binding

Question

I've got a parent and child component pair that has me stuck with data binding.

A top level component will render a new Question component:

<Question updateScore={this.updateScore} />

The updateScore method will just update a hash with numerical values. That's not too important. The question component is pretty straightforward:

var Question = React.createClass({
  getInitialState: function () {
    return { options: blahBlahBlah };
  },

  updateScore: function(optionLabel) {
    this.props.updateScore(optionLabel);
  },

  render: function() {
    var optionList = this.state.options.map(function(option) {
      return (
        <QuestionItem optionLabel={option.optionLabel} description={option.description}
                      updateScore={this.updateScore} key={option.key} />
      );
    }.bind(this));

    return (
      <ul>
        {optionList}
      </ul>
    );
  }
});

The question item componenet is even simpler:

var QuestionItem = React.createClass({
  render: function() {
    return (
      <li onClick={this.props.updateScore.bind(this, this.props.optionLabel)}>
        {this.props.description}
      </li>
    );
  }
});

The problem is with the current implementation, the console spits out this error:

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

Also if I log out the value of the score that's being updated then I see that it doesn't update any of the keys but inserts an undefined:

{ labelOne: 0, labelTwo: 0, undefined: NaN }

How should I go about binding this?

Answer 1

React actually auto-binds methods to the current component:

scope.props.updateScore.bind(null, this.props.optionLabel)

By providing null instead of this you'll allow React to do its own thing.

Answer 2

EDIT: This answer was posted before the question edit. I'm keeping it because it could help others in the future

When you do () after the function you're passing the result of your function to the Question component. That way, when you call your this.props.updateScore you're only getting the result of the function instead of executing it.

You need to pass its reference down so the Question component can execute or bind to it. This way when you call this.props.updateScope you will get a function and can execute it using this.props.updateScope() or bind to it this.props.updateScope.bind(this) for example.

Remove those () like here:

<Question updateScore={this.updateScore} />

And you should be good to go