javascript - React.js - Passed function "not a function" Error

Question

I am trying to pass props from a child component to a parent component, but for some reason I'm getting the error "TypeError: this.props.onClick is not a function" in the js console after clicking on the rendered child components.

Basically what I am trying to do is manage a list of categories in which one category subcomponent has the 'selected' prop as true, and updates correctly every time you click on a category li.

Here is a jsfiddle with the code: http://jsfiddle.net/kb3gN/8023/

I don't really feel like I've grasped the concepts of how to use React.js effectively yet, so any help is appreciated!

Best Regards and Thanks in advance,

bnunamak

Code:

var CategoryList = React.createClass({

getInitialState:function(){
    return {
        items:[
            ["cat1", false],
            ["cat2", true]
        ],
        lastToggled:["cat2"]
    }
},

//Function passed to child (changes items state)
handleClick:function(child){
    var tempItems = this.state.items;
    if(this.state.lastToggled[0] === child.props.name){
        var index = this.getInd(this.state.tempItems, child.props.name);
        tempItems[index][1] = !tempItems[index][1];

        this.setState({items: tempItems});
    }else{
        var newIndex = this.getInd(this.state.tempItems, child.props.name);
        tempItems[newIndex][1] = !tempItems[newIndex][1];

        var oldIndex = this.getInd(this.state.tempItems, this.state.lastToggled[0]);
        tempItems[oldIndex][1] = false;

        this.setState({items: tempItems, lastToggled: tempItems[newIndex][0]});

    }
},

//getInd not relevant to problem
getInd:function(arr, elname){
    for (var i = arr.length - 1; i >= 0; i--) {
        if(arr[i][0] === elname){
            return i;
        }
    };
    return -1;
},

render:function(){
    return (<ul className="category-list">
        {
            this.state.items.map(function(item){
                return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />;
            })
        }
        </ul>)
}

});


var Category = React.createClass({

render:function(){
    if(this.props.selected){
        return (<li onClick={this.propogateClick} className="selected">{this.props.name}</li>);
    }else{
        return (<li onClick={this.propogateClick}>{this.props.name}</li>);
    }
},

propogateClick: function(){
    this.props.onClick(this);
}

});


React.renderComponent(<CategoryList/>, document.getElementById('example'));

Answer 1

You can use bind to solve this problem

this.state.items.map(function(item){
     return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />;
}.bind(this))