title: How to async await in react render function?
body: <p>I am pretty much familiar with the <code>async await</code> but with back end <code>nodejs</code>. But there is a scenario came across to me where I have to use it on front end.</p>
  <p>I am getting array of objects and in that objects I am getting <code>lat lng</code> of the places. Now using <code>react-geocode</code> I can get the place name for a single <code>lat lng</code> but I want to use that inside the map function to get the places names. SO as we know it <code>async</code> call I have to use <code>async await</code> over there.</p>
  <p>Here is the code</p>
  <pre><code>import Geocode from &quot;react-geocode&quot;;
  render = async() =&gt; {
    const {
      phase,
      getCompanyUserRidesData
    } = this.props   
                        
    return (
      &lt;div&gt;
         &lt;tbody&gt;                   
          await Promise.all(_.get(this.props, 'getCompanyUserRidesData', []).map(async(userRides,index) =&gt; {
            const address = await Geocode.fromLatLng(22.685131,75.873468)
            console.log(address.results[0].formatted_address)                         
           return ( 
            &lt;tr key={index}&gt;
              &lt;td&gt;
              {address.results[0].formatted_address}
              &lt;/td&gt;
              &lt;td&gt;Goa&lt;/td&gt;
              &lt;td&gt;asdsad&lt;/td&gt;
              &lt;td&gt;{_.get(userRides,'driverId.email', '')}&lt;/td&gt;
              &lt;td&gt;{_.get(userRides,'driverId.mobile', '')}&lt;/td&gt;
            &lt;/tr&gt;
          )
          }))
        &lt;/tbody&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>But when I use async with the map function here it doesn't return anything. Can anyone please help me where I going wrong?</p>