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;

finalfreq · Accepted Answer · 2016-11-03 21:17:34Z

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.

answered Nov 3, 2016 at 21:17

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tomasz Kostuch Over a year ago

Thanks it's working when I add bind. But there is next problem, Uncaught TypeError: Cannot read property 'title' of undefined(…). It doesn't read this.state.title.push(title); I thought that it would push the value to this.state.title

Robiseb Over a year ago

For 2 reasons. 1. The push() method adds elements to the end of an array. this.state.title is a string. 2. To change a state, do like you did one line below : this.setState({ title: this.state.title }); or, because they have the same name, you can do it shorter : this.setState({ title });. You can combine the both : this.setState({ title, post: this.state.title });

Tomasz Kostuch Over a year ago

OK. I got it: this.addPost = this.addPost.bind(this); } addPost(title){ this.setState({ title }); } THANKS! :)

Pineda · Accepted Answer · 2016-11-03 21:20:50Z

0

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

answered Nov 3, 2016 at 21:20

Pineda

7,5933 gold badges34 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to add posts using React?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related