title: Cannot access geolocation inside of function
body: <p>I have been trying to figure this out for a while now. I have three functions that all work in isolation. However, I cannot get the value from <code>getUserCoordinates()</code> to appear in <code>fetchCurrentTemp()</code>. It returns <code>undefined</code> no matter what I attempt. I've been outside of the JS environment for a minute, so perhaps I am missing something obvious but i am stumped.</p>
  
  <p><strong>fetchCurrentTemp()</strong></p>
  
  <pre><code>import { getUserCoordinates } from './helpers';
  const url = 'http://api.openweathermap.org/data/2.5';
  
  export const fetchCurrentTemp = async () =&gt; {
      const coordinates = getUserCoordinates();
      console.log('coords:', coordinates);
      // logs 'undefined'
      try {
          let response = await fetch(`${url}/weather?APPID=x&amp;lat=50.7498752&amp;lon=-100.0004158&amp;units=imperial`);
          let output = await response.json();
      } catch (error) {
          console.log(error);
      }
  };
  </code></pre>
  
  <p><strong>getUserCoordinates()</strong></p>
  
  <pre><code>export const getUserCoordinates = () =&gt; {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(({ coords }) =&gt; {
              console.log(coords);
              //returns a value
              return coords;
          });
      } else {
          alert('Something is wrong');
      }
  };
  </code></pre>
  
  <p><strong>App</strong></p>
  
  <pre><code>import React from 'react';
  import { fetchCurrentTemp } from './utils/api_calls';
  
  function App() {
      return (
          &lt;div&gt;
              &lt;button onClick={() =&gt; fetchCurrentTemp()}&gt;Hello&lt;/button&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>