title: How to properly map over array of url and get data into state?
body: <p>In this code block I am mapping over an array of Spotify urls, getting there data, and trying to push them into state. As of right now this code returns an array of promises and does not await the actual data. This doesn't make sense to me as I am awaiting the data from the axios call.</p>
  <pre><code>const fetchSpotifyData = async () =&gt; {
      const allTracks = data.map(async (d) =&gt; {
        let track = {
          album: &quot;&quot;,
          image: &quot;&quot;,
          artist: &quot;&quot;,
          trackName: &quot;&quot;,
          externalUrl: &quot;&quot;,
        };
        const incomingTrack = await axios.get(
          `https://api.spotify.com/v1/tracks/${d.uri}`,
          {
            headers: {
              Authorization: `Bearer ${spotifyToken}`,
            },
          }
        );
        console.log(incomingTrack) // the data is here and is correct
        track.album = incomingTrack.data.album.name;
        track.image = incomingTrack.data.album.images[0].url;
        track.artist = incomingTrack.data.artists[0].name;
        track.trackName = incomingTrack.data.name;
        track.externalUrl = incomingTrack.data.external_urls.spotify;
        console.log(track) // this shows the correct track data
        return track;
      });
          console.log(allTracks)// Array [ Promise {
    //  &quot;_U&quot;: 0,
     // &quot;_V&quot;: 0,
    //  &quot;_W&quot;: null,
    //  &quot;_X&quot;: null,
   // },
   // ]
  
    return allTracks;
    };
  </code></pre>