Call parent class method from child in ReactJS

Question

i have a problem in ReactJS I want to call this.props.onAction() method from Child class but i have an error:

Uncaught TypeError: this.props.onShotImageClick is not a function

http://jsfiddle.net/01fbL37L/

I want to call this method when buttons are generated dynamically in Parent class.

var btns = ['aaa', 'bbb', 'ccc']

var Child = React.createClass({
  render: function () {
    return <button onClick={this.handleClick} type="button"> {this.props.text} </button>;
  },
  handleClick: function () {
    this.props.onAction("super text");
  }, 
});

var Parent = React.createClass({
  render: function () {
    var buttons = btns.map(function(btn){
        return <Child onAction={this.superAction} text={btn} />;
    });
    return <p>{buttons}</p>;
  },
  superAction: function (text) {
    alert('The Child button say: ' + text);
  }
});

React.renderComponent(<Parent />, document.body);

If i call it directly in "return" it works.. http://jsfiddle.net/f2ty4jkm/

Thanks.

Answer 1

Set this to .map callback, because in your case this refers to window not to your Parent object

 var buttons = btns.map(function(btn) {
     return <Child onAction={this.superAction} text={btn} />;
 }.bind(this));

Example