title: how to await axios call within .map that is inside of useEffect React
body: <p>Inside of my <code>useEffect</code> hook I am trying to call an api request that is inside of <code>.map</code> but the rest of the function isn't waiting for the response. I've tried making the <code>.map</code> <code>async</code> but then the rest of the function returns <code>Promises</code> what is the correct way of doing this so that my api request can be called and then proceed with the rest of the code?</p>
  <pre><code>const getData = async (id) =&gt; {
      const myData = await api.get(
        '/api/request/id'
      );
      return myData;
    };
  
  useEffect(() =&gt; {
    const myData = sampleData.map((item)
      getData(item.id).then((response) =&gt; {
        console.log(response.data.data);
        return response.data.data
      })
    
    const myThings = myItem.things.map((thing) =&gt; {
      if (thing.type === 'sampleType1') {
        return [thing.name, thing.value];
      } else (thing.type === 'sampleType2') {
        return [
          thing.name,
          thing.content.name,
        ];
      }
    });
    setData = {myThings, myData}
  }, []);
  </code></pre>