title: How do I render the my latest data through GET request after submitting a POST request
body: <p>I am having some difficulties with Reactjs lifecycles. I have my front-end and back-end all set up but I can't figure out how to re-render the latest data after submitting a new data through POST request.</p>
  
  <p>I am currently using componentWillMount to display all initial data from my database </p>
  
  <pre><code>componentWillMount(){
    axios.get('localhost:####/api/)
     .then(res =&gt;{
       this.setState({
         listOfData:res.data
       })
     })
  }
  </code></pre>
  
  <p>I have an addData function which sends a POST request to my database</p>
  
  <pre><code>addData(){
    let newData = 'string';
    axios.post(localhost:####/api, newData)
  }
  </code></pre>
  
  <p>Now I know that we can just assign my listOfData from the GET request as a variable and push the new recipe into the state array(listOfData) to display it in our front-end, however my table in my database has an id increments and a timestamp thus if I wanted to update or delete my latest data it would cause an error. It cannot read the id value which makes sense since I did not assign the id in my POST request. </p>
  
  <p>The only way I can display the new data from my database is to refresh the page which defeats the purpose. Do I have to include an id and timestamp from my front-end then in order to target the right id? There has to be a way to re-render my page and update the listOfData without refreshing it. </p>
  
  <p>I've tried the following </p>
  
  <pre><code>componentWillUpdate(){
    axios.get('localhost:####/api/)
     .then(res =&gt;{
      this.setState({
       listOfData:res.data
      })
     })
  }
  </code></pre>
  
  <p>but this def isn't the right way.</p>