title: Not able to use a map function on an array of dictionaries
body: <p>Hope someone can help me out.</p>
  <p>I am trying to dynamically create some cards on my webpage out of a dictionary.</p>
  <p>I tried to create the function but the code inside the first <code>&lt;div&gt;</code></p>
  <pre><code>cards.map((character)=&gt;(
  </code></pre>
  <p>is not recognizing the array of dictionaries.</p>
  <p>Any ideas on how to fix it?</p>
  <pre><code>function MemoryCards() {
      const images = [
          &quot;./img/Abadango.jpeg&quot;,
          &quot;./img/abradolf.jpeg&quot;,
          &quot;./img/Adjudicator.jpeg&quot;,
          &quot;./img/AgencyDirector.jpeg&quot;,
          &quot;./img/Alan.jpeg&quot;,
          &quot;./img/Albert.jpeg&quot;,
          &quot;./img/Alexander.jpeg&quot;,
          &quot;./img/AlienMorty.jpeg&quot;,
          &quot;./img/AlienRick.jpeg&quot;,
          &quot;./img/Annie.jpeg&quot;,
          &quot;./img/AntsJonson.jpeg&quot;,
          &quot;./img/Beth.jpeg&quot;,
          &quot;./img/Jerry.jpeg&quot;,
          &quot;./img/morty.jpeg&quot;,
          &quot;./img/ricky.jpeg&quot;,
          &quot;./img/summer.jpeg&quot;
      ]
  
      const cards = [];
      let len = images.length;
  
      for (let i = 0; i &lt; len; i++) {
          let end = images[i].indexOf('.', 3);
          let name = images[i].substring(6, end);
          let card = { 'name': name, 'img': images[i], 'id': i };
          cards.push(card);
      }
  
      return (
          &lt;div&gt;
              cards.map((character)=&gt;(
              &lt;div class=&quot;card&quot;&gt;
                  &lt;div className=&quot;card_header&quot;&gt;
                      &lt;img src={cards.img}&gt;&lt;/img&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;card_body&quot;&gt;
                      &lt;h3&gt;{cards.name}&lt;/h3&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              ))
          &lt;/div&gt;
  
      )
  
  }
  
  export default MemoryCards;
  </code></pre>