title: Reflect changes without refresh in React
body: <p>I am trying to do a simple task, with an input box in which text is entered and on submit gets listed below. I am unaware of how to reflect changes without refresh.</p>
  
  <p>App.js</p>
  
  <pre><code>  constructor(props){
      super(props);
      this.state={
       todoList:[]
      }
    }
    componentWillMount(){
     console.log("mounting app");
     axios.get('http://localhost:8888/todoitems').then((res)=&gt;{
       this.setState({todoList: res.data});
     });
    }
    save=()=&gt;{
     var data={
       name:this.refs.newvalue.value,
       status:'started'
     };
     axios.post('http://localhost:8888/todoitem',data).then((res)=&gt;{
      console.log("data inserted is":data);
     });
    }
    render() {
     return (
      &lt;div className="App"&gt;
        &lt;input type="text" ref="newvalue"/&gt;
        &lt;button onClick={this.save}&gt;Submit&lt;/button&gt;
        &lt;table&gt;
          &lt;tbody&gt;
            {
             this.state.todoList.map(todo =&gt; (
                 &lt;TodoList 
                   key={todo.id} 
                   id={todo.id} 
                   name={todo.name} 
                   status={todo.status} 
                   click={this.update.bind(this,todo.id)}
                 /&gt;
                )})
            }
          &lt;/tbody&gt;
        &lt;/table&gt;
      }
  </code></pre>
  
  <p>TodoList.js</p>
  
  <pre><code> render() {
      return (
        &lt;tr onClick={this.props.click}&gt;
           &lt;td&gt;{this.props.id}&lt;/td&gt;
           &lt;td&gt;{this.props.name}&lt;/td&gt;
           &lt;td&gt;{this.props.status}&lt;/td&gt;
        &lt;/tr&gt;
      );
   }
  </code></pre>
  
  <p>By this, changes would be reflected only in refresh. But i need changes reflected instant. I tried with shouldcomponentupdate and componentwillupdate but i see nextProps as undefined.And i am naive on knowing how to proceed. Please favour.</p>