title: rerender after fetch POST and PUT request
body: <p>I have an app that GET's data from a REST API. I am able to fetch the data. I also need to be able to POST data to the API and PUT edits to the API. My code is able to successfully perform all of these operations, however I need to refresh the page to see the submissions. The trouble I am having is with automatically rerender the page upon submissions. I know I either have to setState or refetch the API after the call. I do not know how to structure this though. Any suggestions?</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
   class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        dataSource: [],
        isLoaded: false,
      }
      this.editBeersLikes = this.editBeersLikes.bind(this);
      this.addNewBeer = this.addNewBeer.bind(this);
    }
  
     seeBeers() {
     return fetch("https://beer.fluentcloud.com/v1/beer/")//specify id number to show single beer ex. "https://beer.fluentcloud.com/v1/beer/99"
       .then(response =&gt; response.json())
       .then(responseJson =&gt; {
         this.setState({
           isLoaded: true,
           dataSource: responseJson,
         });
         return responseJson;
       })
       .catch(error =&gt; console.log(error)); //to catch the errors if any
   }
  
     addNewBeer() {
      fetch("https://beer.fluentcloud.com/v1/beer/", {
        body: "{\"name\":\"\",\"likes\":\"\"}",//input beer name and like amount ex "{\"name\":\"Michelob Ultra\",\"likes\":\"-5\"}"
        headers: {
          "Content-Type": "application/json"
        },
        method: "POST"
        })
        console.log("Beer Added!");
    }
  
     editBeersLikes() {
      fetch("https://beer.fluentcloud.com/v1/beer/99", {//must specify id number to edit a single beer's likes ex "https://beer.fluentcloud.com/v1/beer/99"
            body: "{\"likes\":\"\"}", //input amount of likes to edit ex "{\"likes\":\"22\"}"
            headers: {
              "Content-Type": "application/json",
              "Accept": "application/json"
            },
            method: "PUT"
            })
            console.log("Likes Successfully Updated!");
          }
  
           componentDidMount() {
            this.seeBeers();
            //this.editBeersLikes(); //uncomment when you want to edit likes
            //this.addNewBeer();  //uncomment when you want to add beers
          }
  
  
     render() {
      return (
        &lt;div className="App"&gt;
        &lt;h1&gt;What is in My Fridge?&lt;/h1&gt;
  
           &lt;ul&gt;
            {this.state.dataSource.map(dataSource =&gt; {
              return &lt;li key={`dataSource-${dataSource.id}`}&gt;{dataSource.name} | {dataSource.likes}&lt;/li&gt;
            })}
          &lt;/ul&gt;
  
         &lt;/div&gt;
      );
    }
  }
  
   export default App;
  </code></pre>