title: How to get location information in react?
body: <p>I want to get location information by using <code>Geolocation API</code> in react.</p>
  
  <p>I made a <code>button</code> to get location info in this code.</p>
  
  <pre><code>import React, { Component } from 'react'
  
  class App extends Component {
    constructor(props) {
      super(props)
      this.state = {
        latitude: null,
        longitude: null,
      }
    }
  
    position = async () =&gt; {
      await navigator.geolocation.getCurrentPosition(
        position =&gt; this.setState({ 
          latitude: position.coords.latitude, 
          longitude: position.coords.longitude
        }), 
        err =&gt; console.log(err)
      );
      console.log(this.state.latitude)
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.position} className='Filter'&gt;Filter&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Once I pressed a <code>button</code>, console shows <code>null</code>.
  However, when I pressed a <code>button</code> again, the console shows location info.</p>
  
  <p>Do you have any idea why I couldn't get the location info for the first time?</p>