title: How can I change API url on express from a react component
body: <p>I have the following external JSON API:</p>
  
  <pre><code>{
    "products": [
      {
        "id": 1,
        "name": "Product Number 1",
      },
      {
        "id": 2,
        "name": "Product Number 2",
      },
      {
        "id": 3,
        "name": "Product Number 3",
      }
    ],
    "nextPage": "someapiurl.com/products?page=2"
  }
  </code></pre>
  
  <p>The nextPage link on API has the same structure above, but with different products and a link to page 3. And then page 4, 5, 6, ..., has the same structure.</p>
  
  <p>I'm fetching it to an express server and using a proxy to use the data on React.</p>
  
  <p>This is the express server I have:</p>
  
  <pre><code>const express = require('express');
  const fetch = require('node-fetch');
  const path = require('path');
  const app = express();
  
  app.use(express.static(path.join(__dirname, 'build')));
  
  app.get('/api', (req, res) =&gt; {
      let url = 'someapiurl/products?page=1';
      fetch(url).then((response) =&gt; response.json()).then((contents) =&gt;
          res.send({
              products: contents.products,
              nextPage: contents.nextPage
          })
      );
  });
  
  app.get('*', (req, res) =&gt; {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });
  
  app.listen(process.env.PORT || 8080);
  </code></pre>
  
  <p>and then my react component:</p>
  
  <pre><code>import React, { useEffect, useState } from 'react';
  import fetch from 'node-fetch';
  
  const IndexPage = () =&gt; {
      const [ products, setProducts ] = useState([]);
      const [ nextPage, setNextPage ] = useState('');
  
      useEffect(() =&gt; {
          const url = '/api';
          fetch(url).then((response) =&gt; response.json()).then((contents) =&gt; {
              setProducts([ ...products, ...contents.products ]);
              setNextPage(contents.nextPage);
          });
      }, []);
      return (
          &lt;div&gt;
              {products.map((product) =&gt; &lt;p&gt;{product.name}&lt;/p&gt;)}
              &lt;button&gt;Load More&lt;/button&gt;
          &lt;/div&gt;
      );
  };
  
  export default IndexPage;
  </code></pre>
  
  <p>What I expect is when I click 'load more', the state nextPage is sent to express and then changes the variable url. My intentions is that the products from 2nd page on API are added to products state and then rendered to the page.</p>
  
  <p>I can change it to axios to query data, if it's better.</p>