title: How to make API calls for each element in array
body: <p>I'm using Next.js / React.js. I'm using <a href="https://restcountries.eu/rest/v2/name/United%20States%20of%20America?fullText=true" rel="nofollow noreferrer">this API</a> to get a specific country.</p>
  <p>There's an array on this response called borders, for example.</p>
  <pre><code>borders: [
     &quot;CAN&quot;,
     &quot;MEX&quot;,
  ],
  </code></pre>
  <p>There's an end point to get the data based on a border, for example.</p>
  <p><a href="https://restcountries.eu/rest/v2/alpha/can" rel="nofollow noreferrer">https://restcountries.eu/rest/v2/alpha/can</a></p>
  <p>How would I get the data both borders, i.e. each element in the borders array? It's two API calls that I've tried to make in a loop, but I get undefined.</p>
  <pre><code>export async function getServerSideProps(context) {
    const { name } = context.params;
    const res = await fetch(`https://restcountries.eu/rest/v2/name/${name}?fullText=true`)
    const countryRes = await res.json();
  
    const country = countryRes[0];
  
    // Get the borders
    const borders = country.borders;
  
    // I'm making an API call to each element in array
    const borderCountr = borders.forEach(border =&gt; {
      fetch(`https://restcountries.eu/rest/v2/alpha/${border}`);
    });
  
    console.log(borderCountr); // undefinded
    if (!country) {
      return {
        notFound: true,
      }
    }
  
    return {
      props: { country }
    }
  }
  </code></pre>