title: React.js - Passed function "not a function" Error
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>Here is a jsfiddle with the code: <a href="http://jsfiddle.net/kb3gN/8023/" rel="noreferrer">http://jsfiddle.net/kb3gN/8023/</a></p>
  
  <p>I don't really feel like I've grasped the concepts of how to use React.js effectively yet, so any help is appreciated! </p>
  
  <p>Best Regards and Thanks in advance,</p>
  
  <p>bnunamak</p>
  
  <p>Code: </p>
  
  <pre><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 &gt;= 0; i--) {
          if(arr[i][0] === elname){
              return i;
          }
      };
      return -1;
  },
  
  render:function(){
      return (&lt;ul className="category-list"&gt;
          {
              this.state.items.map(function(item){
                  return &lt;Category onClick={this.handleClick} name={item[0]} selected={item[1]} /&gt;;
              })
          }
          &lt;/ul&gt;)
  }
  
  });
  
  
  var Category = React.createClass({
  
  render:function(){
      if(this.props.selected){
          return (&lt;li onClick={this.propogateClick} className="selected"&gt;{this.props.name}&lt;/li&gt;);
      }else{
          return (&lt;li onClick={this.propogateClick}&gt;{this.props.name}&lt;/li&gt;);
      }
  },
  
  propogateClick: function(){
      this.props.onClick(this);
  }
  
  });
  
  
  React.renderComponent(&lt;CategoryList/&gt;, document.getElementById('example'));
  </code></pre>