Error using .bind() in React event handler

Question

I am working through a React tutorial and cannot understand why I am having a bug.

I am attempting to add this button element using React:

<button onClick={this.add.bind(null, 'new item')}>New Item</button>

the event handler should call the following function which lies inside a different React class:

    add: function(item) {
    var arr = this.state.comments;
    arr.push(item);
    this.setState({comments: arr});
    },

I was told this was not working because I am "binding null to your functions this value and inside the function you are accessing properties from this which results in a typeError (probably: cannot access property state of null or sh.)"

However, I have no idea what this means or how to solve the problem. Please help.

Below is a link to my full codepen project and the youTube tutorial (React JS Tutorials for Beginners - 13 - Creating New Components by theNewBoston) I am using.

http://codepen.io/Daniel_Widrich/pen/yVaXXZ

https://www.youtube.com/watchv=OKRu7i49X54&index=13&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA

Thank you very much in advance. This is my first question on StackOverflow and I am attempting to get accepted into an apprenticeship program based on this project. Any feedback is much appreciated and I'm a big boy so I can handle criticism.

-Dan

Answer 1

The error message Uncaught TypeError: Cannot read property 'bind' of undefined means that you're calling bind on an undefined object. ie. this.add is undefined.

Why is this.add undefined?

Because you don't have an add function defined in the Board component. Move the add function from the Comment component to the Board component.

(Move lines 15-19 of your Javascript code into the Board component.)

Working codepen