title: How to make an axios expression await until it receives a response
body: <p>So I have a React App that comunicates with my API that returns JSON data, and I want to parse that data to my results array. The problem is that axios is async, so when I execute my function, results array will be returned before it gets parsed the data from the response, and it will log as empty, so I can't use my response array in the rest of the project. How do I make the axios expression in my function to wait until it has a response and then execute the rest?</p>
  <p>Function:</p>
  <pre><code>async function pin(){
  
    const result = []
    var url = &quot;my_api_url&quot;
  
    axios.get(url)
    .then((res)=&gt;{
      if(res.data){
            result = JSON.parse(res.data.data)
      }
    })
    console.log(result);
    return result;
  }
  </code></pre>
  <p>This is the react right after the function:</p>
  <pre><code>export default function App(){
  
    const{isLoaded, loadError} = useLoadScript({
      googleMapsApiKey: &quot;my_api_key&quot;,
      libraries,
    })
  
    const [markers, setMarkers] = React.useState([]);
    if(loadError) return &quot;Erro a carregar o mapa&quot;
    if(!isLoaded) return &quot;Carregando&quot;
  
    const result = []
  
    return &lt;div&gt;
      {pin()}
      &lt;GoogleMap 
      mapContainerStyle={mapContainerStyle} 
      zoom={11} 
      center={center}
      &gt;
      &lt;/GoogleMap&gt;
    &lt;/div&gt;
  }
  </code></pre>
  <p>I'm just calling the function here to see if it's OK, I haven't implemented it yet.
  I have already tried to switch <code>.then</code> to <code>.await</code> but I get the error <code>Objects are not valid as a React child (found: [object Promise])</code></p>