How do you Map an Async Function in Javascript?

Asked Mar 14 '20 at 20:34

Active Mar 14 '20 at 20:41

Viewed 49 times

I am building a react native app which has a map function to create markers on a map for an array of different places. To do this I am using an API to get the coordinates and so need to use an async function as so:

this.state.place.map(async (place) => {
  const coords = await fetchCoords(place)

  return (
    <Marker coordinate={coords}/>
  )
})

But this code gives the error Invariant Violation: Objects are not valid as a React child (found: object withkeys {_40, _65, _55, _72}). I am guessing the error is because I have implemented the async map function wrong. What should it be?

asked Mar 14 '20 at 20:34

M. Alex

the error is here ` return ( )` – Prakash Reddy Potlapadu Mar 14 '20 at 20:41
You **cannot** use `async/await` with `map`, use a `for...of` instead. What you're currently doing won't work properly. I suggest give more context and code on how exactly are you using this. It sounds like you're trying to render `Promises` that return `React` components. – goto Mar 14 '20 at 20:41
this will help you https://dev.to/nyagarcia/array-map-async-await-2cif – Prakash Reddy Potlapadu Mar 14 '20 at 20:46
You can't do that, fetch the coordinates and save them as state, then render the markers – Asaf Aviv Mar 14 '20 at 20:59
@trincot this is not a duplicate he is confused with mapping and async flow. – Luis Villavicencio Mar 15 '20 at 03:03

How do you Map an Async Function in Javascript?

0 Answers0