React.js TypeError this.props未定义

Question

I've started trying to learn react and have ran into a problem I can't seem to figure out. Going through a tutorial making a simple comment editing web app and I'm getting this error when I try to update a comment "TypeError: _this3 is undefined", specifically on these lines:

this.props.updateCommentText(this.refs.newText.value, this.props.index);

and this one:

updateCommentText={()=>this.updateComment} 

Here is the full javascript code:

class Comment extends React.Component{

  constructor(){
    super();
    this.state = {
      editing: false,
    };

    this.edit = this.edit.bind(this);
    this.save = this.save.bind(this);
  }

  edit(){
    this.setState({
      editing: true,
    });
  }

  save(){
    this.props.updateCommentText(this.refs.newText.value, this.props.index);
    this.setState({
      editing: false,
    });
  }
  remove(){
    console.log('Removing comment');
    this.props.deleteFromBoard(this.props.index)
  }

  renderNormal(){
    return (
        <div className="commentContainer">
          <div className="commentText">{this.props.children}</div>
          <button onClick={this.edit} className="button-primary">Edit</button>
          <button onClick={this.remove} className="button-danger">Remove</button>
        </div>

      );
  }

  renderForm(){
    return (
        <div className="commentContainer">
          <textarea ref="newText" defaultValue={this.props.children}></textarea>
          <button onClick={this.save} className="button-success">Save</button>
        </div>

      );
  }

  render(){
    if(this.state.editing){

      return this.renderForm();

    } else {

      return this.renderNormal();

    }
  }
}

class Board extends React.Component{

  constructor(){
    super();
    this.state = {
      comments: [
        "Hiya",
        "Awk well",
        "Boo-urns"
      ],
    }
  }

  removeComment(i){
    console.log("Removing comment: " + i);
    var arr = this.state.comments;
    arr.splice(i, 1);
    this.setState({
      comments: arr
    });
  }

  updateComment(newText, i){
    console.log("Updating comment: " + i);
    var arr = this.state.comments;
    arr[i] = newText;
    this.setState({
      comments: arr,
    });

  }

  eachComment(text, i){
    return (
      <Comment key={i} index={i} 
      updateCommentText={()=>this.updateComment} 
      deleteFromBoard={()=>this.removeComment}>

        {text}

      </Comment>
    );
  }

  render(){
    return (
        <div className="board">
          {
            this.state.comments.map(this.eachComment)
          }
        </div>

    );
  }
}



// ========================================

ReactDOM.render(
  <Board />,
  document.getElementById('container')
);

I'm assuming something has went out of scope but I'm not sure where.

Answer 1

This is one issue, but there may be more :)

In this code:

updateCommentText={()=>this.updateComment}

your arrow function returns a function reference, but does not call the function when updateCommentText is invoked.

Try this instead:

updateCommentText={(value, index)=>this.updateComment(value, index)}

BTW, you have a similar issue here:

deleteFromBoard={()=>this.removeComment}