How to add posts using React?

Question

I'm working on an app that adds posts to a table. My code below doesn't work. It's giving me this error:

Uncaught TypeError: Cannot read property 'props' of null(…) for function handleAddNew()

import React from 'react';

class App extends React.Component {
    constructor(props) {
     super(props);
      this.state = {
        number:'1',
        name:'gogo',
        title:'',
        views:'10',
        likes:'22',
        date:'1.1.1111'
    };
  }
    addPost(title){
      this.state.title.push(title);
      this.setState({
        post: this.state.title
      });
  }
   render() {
      return (
         <div>
            <AddPost addNew={this.addPost} />
            <table>
                <thead>
                    <Thead/>
                </thead>
                <tbody>
                    <Row number={this.state.number}
                        name={this.state.name}
                        title={this.state.title}
                        views={this.state.views}
                        likes={this.state.likes}
                        date={this.state.date}/>
                </tbody>
            </table>
         </div>
      );
   }
}
class AddPost extends React.Component{
    constructor(props) {
     super(props);
      this.state = {
        newPost: ''
     }
     this.updateNewPost = this.updateNewPost.bind(this);
  }
  updateNewPost(e){
    this.setState({newPost: e.target.value});
  }
  handleAddNew(){
    this.props.addNew(this.state.newPost);
    this.setState({newPost: ''});
  }
  render(){
    return (
        <div>
          <input type="text" value={this.state.newPost} onChange={this.updateNewPost} />
          <button onClick={this.handleAddNew}> Add Post </button>
        </div>
    );
  }
}
class Thead extends React.Component {
   render() {
      return (
        <tr>
            <td id='number'>ID</td>
            <td id='name'>User name</td>
            <td id='title'>Post title</td>
            <td id='views'>Views</td>
            <td id='likes'>Likes</td>
            <td id='date'>Created at</td>
        </tr>
      );
   }
}
class Row extends React.Component {
   render() {
      return (
        <tr>
            <td>{this.props.number}</td>
            <td>{this.props.name}</td>
            <td>{this.props.title}</td>
            <td>{this.props.views}</td>
            <td>{this.props.likes}</td>
            <td>{this.props.date}</td>
        </tr>
      );
   }
}

export default App;

Answer 1

You forgot to bind handleAddNew to this in the same way you did for this.updateNewPost!

Answer 2

You didn't bind handleAddNew to this you need to add

this.handleAddNew = this.handleAddNew.bind(this);

in your constructor

if you are using babel and have stage-2 plugin you can change your instance methods to arrow functions like so:

handleAddNew = () => {    
  // do stuff
}

instead of having to bind it in the constructor. The first method will work out of the box but if you are using babel it is definitely cleaner to do the second method.