title: ReactJS: Uncaught TypeError: this.props.updateCommentText is not a function
body: <p>I am a newbie and just followed a React tutorial on YouTube but I failed to click save button as well as edit button because of the same error (in the save and edit function) as the question title. I tried to ask the YouTube author, but still no respond. </p>
  
  <p>This is the source code: </p>
  
  <pre><code>var Comment = React.createClass({
    getInitialState: function(){
      return {editing: false};
    },
    edit: function(){
      this.setState({editing: true});
    },
    remove: function(){
      this.props.deleteFromBoard(this.props.index);
    },
    save: function(){
      this.props.updateCommentText(this.refs.newText.value, this.props.index);
      this.setState({editing: false});
    },
  
    renderNormal: function(){
      return(
        &lt;div className = "commentContainer"&gt;
          &lt;div className = "commentText"&gt;{this.props.children}&lt;/div&gt;
          &lt;button onClick = {this.edit} className = "btn btn-primary"&gt;Edit&lt;/button&gt;
          &lt;button onClick = {this.remove} className = "btn btn-danger"&gt;Remove&lt;/button&gt;
        &lt;/div&gt;
      );
    },
  
    renderForm: function(){
      return(
        &lt;div className = "commentContainer"&gt;
          &lt;textarea ref = "newText" defaultValue = {this.props.children}&gt;&lt;/textarea&gt;
          &lt;button onClick = {this.save} className = "btn btn-success"&gt;Save&lt;/button&gt;
        &lt;/div&gt;
      );
    },
  
    render: function(){
      if(this.state.editing){
        return this.renderForm();
      }
      else{
        return this.renderNormal();
      }
    }
  });
  
  var Board = React.createClass({
    getInitialState: function(){
      return{
        comments: [
          "Hello",
          "Hola"
        ]
      }
    },
  
    removeComment: function(i){
      var arr = this.state.comments;
      arr.splice(i, 1);
      this.setState({comments: arr});
    },
  
    updateComment: function(newText, i){
      var arr = this.state.comments;
      arr[i] = newText;
      this.setState({comments: arr});
    },
  
    eachComment: function(text, i){
              return (
                &lt;Comment key = {i} index = {i} updateCommentText = {this.updateComment} deleteFromBoard = {this.removeComment}&gt;
                  {text}
                &lt;/Comment&gt;
              );
    },
  
    render: function(){
      return(
        &lt;div className = "board"&gt;
          {
            this.state.comments.map(function(text, i){
              return (
                &lt;Comment key = {i}&gt;{text}&lt;/Comment&gt;
              );
            })
          }
        &lt;/div&gt;
      );
    }
  });
  
  ReactDOM.render(
    &lt;Board /&gt;
    ,document.getElementById("target"));
  </code></pre>