title: Mapping over an array and returning API result
body: <p>Trying a simple code to map over an array and, for each result, search an API for that result and spit out data retrieved from the API.</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  
  const App = () =&gt; {
  
    let artistData = require('./mass-artists.json')
  
    artistData.map(
      (theArtist) =&gt; {
          fetch(`[url]https://api.scryfall.com/cards/search?q=a:[/url]"${theArtist}"`)
              .then((response) =&gt; {
                return response.json();
              })
              .then((myJson) =&gt; {
                console.log(JSON.stringify(myJson)); //returns the JSON data, so I know it's working
                console.log(myJson.data[0].name); //returns the first card name
              })
      }
    )
  
    return(&lt;span&gt;This is here so React doesn't yell at me about no return statement.&lt;/span&gt;)
  }
  
  export default App;
  </code></pre>
  
  <p>The JSON file is just a list of names of Magic artists. The map maps over the list of artists and searches on the API for them. I want to do the usual thing I do with the map, i.e. display something on the front-end. But I'm having trouble getting anything to work. I can log things to the console or do any Javascript function such as setting something's innerHTML, but where/how would I put a return statement to show the result in, say, a span tag? Even such as "Hello!".</p>
  
  <p>Thanks as always!</p>