title: "TypeError: Cannot read property 'name' of undefined" when looping on JSON
body: <p>I have a JSON like this :</p>
  
  <pre><code>{
    "cards": [
      {
        "name": "aquaman",
        "img": "aquaman.png"
      },
      {
        "name": "batman",
        "img": "batman.png"
      },
      {
        "name": "captainamerica",
        "img": "captainamerica.png"
      },
      {
        "name": "deadpool",
        "img": "deadpool.png"
      },
      {
        "name": "flash",
        "img": "flash.png"
      },
      {
        "name": "greenlantern",
        "img": "greenlantern.png"
      },
      {
        "name": "ironman",
        "img": "ironman.png"
      },
      {
        "name": "spiderman",
        "img": "spiderman.png"
      },
      {
        "name": "ironfist",
        "img": "ironfist.png"
      },
      {
        "name": "thepunisher",
        "img": "thepunisher.png"
      },
      {
        "name": "wonderwoman",
        "img": "wonderwoman.png"
      },
      {
        "name": "xman",
        "img": "xman.png"
      }
    ]
  }
  
  </code></pre>
  
  <p>and I want to loop on these objects and to render a div with a backgroundImage with the img property of every object, </p>
  
  <p>I tried this, but it tells me:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'name' of undefined</p>
  </blockquote>
  
  <pre><code>import React, { useEffect, useState } from "react";
  import cardsJson from "../../../utils/cards.json";
  
  const [cards, setCards] = useState();
  
  useEffect(() =&gt; {
      setCards(cardsJson.cards);
    }, [cards]);
  
  {cards &amp;&amp;
              cards.map((card: any, index: number) =&gt; (
                &lt;div key={card.name} className="cardHero"&gt;
                  &lt;div className="front"&gt;&lt;/div&gt;
                  &lt;div
                    className="back"
                    style={{
                      backgroundImage: `url(${require(`../../../assets/images/${card.img}`)})`
                    }}
                  &gt;&lt;/div&gt;
                &lt;/div&gt;
              ))}
  
  </code></pre>
  
  <p>It looks like inside the map I can't get name or img for every card ?? And when I console log "cards", it show me the JSON like above with name and img properties</p>