title: Modifying state with response from backend express server
body: <p>I'm pretty new to development, and I could use some guidance. I'm trying to serve up data from my back end after retrieving it from an external API, which works in terms of being able to view the response data in the console/back end. However when I modify my state in React and attempt to use that data on the front end the state is still undefined/an empty string.</p>
  
  <p>Both servers are running on different ports and are communicating properly. </p>
  
  <p>App.js (Front end)</p>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        apiResponse: '',
        products: ''
      };
    }
  
    // Fetch a varying API route based on the argument
    callAPI(x) {
      fetch("http://localhost:8080/" + x)
        .then(res =&gt; res.json())
        .then(res =&gt; this.setState({ apiResponse }))
  
        .catch(err =&gt; err);
    }
  
  &lt;Button
      onClick={(e) =&gt; { e.preventDefault(); this.callAPI('api') }}
      type="success"
      className="input-lg"&gt;
      Records
  &lt;/Button&gt;
  </code></pre>
  
  <p>api.js (Back end)</p>
  
  <pre><code>router.get('/api', function (req, res) {
     axios.get('https://.......................',  config)
          .then((res) =&gt; {
              console.log(res.data);
          })
          .catch((error) =&gt; {
              console.log(error);
          });
  })
  </code></pre>
  
  <p>Any help is greatly appreciated!</p>