React - Cannot Read Property 'call' Of Undefined

Everything seems to work with this small app except adding a new note. Button is located on the Board component. i know this problem is usually caused by not binding value of 'thi

Solution 1:

Your code is fine. This is likely a bug with JSBin, and how it handles transpilation with Babel. If you add the pragma // noprotect to the top of your code you will see that it works.

Solution 2:

I was facing the same error. I was using a base component and I noticed that I had removed componentDidMount method of the base component. And when I call super.componentDidMount in sub component it was giving the error. So I have removed super call and problem solved.

Solution 3:

Binding this is something of a hassle with ES6 classes in React. One way is to bind them in your constructor like so;

constructor(props) {
    super(props)
    this.nextid = this.nextid.bind(this)
    this.state = { 
        notes: [{note: 'hi', id: this.nextId()}]
    }
}

Another is to use babel.configure({stage: 0}) and arrow functions.

nextid = () => {}