title: React - Cannot read property 'call' of undefined
body: <p>Everything seems to work with this small app except adding a new note. Button is located on the Board component. </p>
  
  <p>i know this problem is usually caused by not binding value of 'this' properly. I'm not sure if that's the issue here or if i'm missing something else. Thanks</p>
  
  <p>Demo: <a href="http://jsbin.com/pewahi/edit?js,output" rel="noreferrer">http://jsbin.com/pewahi/edit?js,output</a></p>
  
  <pre><code>/* jshint asi:true */
  
  class Note extends React.Component {
    constructor(props) {
      super(props)
      this.state = { editing: props.editing }
    }
  
    render() {
      if (this.state.editing) {
        return this.renderForm()
      } else {
        return this.renderDisplay()
      }
    }
  
    edit() {
      this.setState({editing: true})
    }
  
    save() {
      this.props.changeHandler(this.refs.newText.getDOMNode().value, this.props.index)
      this.setState({editing: false})
    }
  
    remove() {
      this.props.removeHandler(this.props.index)
    }
  
    renderDisplay() {
       return (      
        &lt;div className="note"&gt;
          &lt;p&gt;{this.props.children}&lt;/p&gt;
          &lt;span&gt;
            &lt;button className="btn btn-sm glyphicon glyphicon-pencil" onClick={this.edit.bind(this)}&gt;&lt;/button&gt;
            &lt;button className="btn btn-sm glyphicon glyphicon-trash" onClick={this.remove.bind(this)}&gt;&lt;/button&gt;
          &lt;/span&gt;
        &lt;/div&gt;   
      )    
    }
  
    renderForm() {
      return (
        &lt;div className="note"&gt;
          &lt;textarea ref="newText" defaultValue={this.props.children} className="form-control"&gt;&lt;/textarea&gt;
          &lt;button onClick={this.save.bind(this)} className="btn btn-success btn-sm"&gt;&lt;span className="glyphicon glyphicon-floppy-disk"&gt;&lt;/span&gt; Save&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  
  Note.propTypes = { 
    editing: React.PropTypes.bool,
    onChange: React.PropTypes.func,
    onRemove: React.PropTypes.func
  }
  
  Note.defaultProps = { editing: false }
  
  class Board extends React.Component {
    constructor(props) {
      super(props)
      this.state = { 
        notes: [{note: 'hi', id: this.nextId()}]
      }
    }
  
    update(newText, i) {
      var arr = this.state.notes
      arr[i].note = newText
      this.setState({notes: arr})
    }
  
    remove(i) {
      var arr = this.state.notes
      arr.splice(i, 1)
      this.setState({notes: arr})
    }
  
    addNote(text) {
      var arr = this.state.notes
      arr.push({
        id: this.nextId(),
        note: text
      })
      console.log(arr)
      this.setState({notes: arr})
    }
  
    nextId() {
      this.uniqueId = this.uniqueId || 0
      return ++this.uniqueId
    }
  
  
    eachNote(note, i) {
      return (
        &lt;Note key={note.id}
              index={i}
              changeHandler={this.update.bind(this)}
              removeHandler={this.remove.bind(this)}
  
          &gt;{note.note}
        &lt;/Note&gt;
      )
    }
  
    render() {
      return (
        &lt;div className="board"&gt;
          {this.state.notes.map(this.eachNote, this)}
          &lt;button onClick={this.addNote.bind(this, "new note")} className="btn btn-success btn-sm glyphicon glyphicon-plus"&gt;&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  
  React.render(
    &lt;Board /&gt;,
    document.getElementById('message-board')
  )
  </code></pre>