title: TypeError: Cannot read property 'map' of undefined error in covid tracker app
body: <p>I am making a covid tracker app in react. For this, I have to make a map but it doesn't get rendered. Also, I'm getting an error while trying to loop through the countries.</p>
  <p>I have attached the code snippet. <img src="https://i.stack.imgur.com/oHzKi.png" alt="enter image description here" /></p>
  <p>I am new to react so I dont understand what is wrong with my code.</p>
  <pre><code>export const prettyPrintStat = (stat) =&gt;
    stat ? `+${numeral(stat).format(&quot;0.0a&quot;)}` : &quot;+0&quot;;
  
  export const showDataOnMap = (data, casesType = &quot;cases&quot;) =&gt;
    data.map((country) =&gt; (
      &lt;Circle
            center={[country.countryInfo.lat, country.countryInfo.long]}
            fillOpacity={0.4}
            pathOptions={casesTypeColors[casesType].option}
            radius={
              Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
            }
          &gt;
        &lt;Popup&gt;
          &lt;div className=&quot;info-container&quot;&gt;
            &lt;div
              className=&quot;info-flag&quot;
              style={{ backgroundImage: `url(${country.countryInfo.flag})` }}
            &gt;&lt;/div&gt;
            &lt;div className=&quot;info-name&quot;&gt;{country.country}&lt;/div&gt;
            &lt;div className=&quot;info-confirmed&quot;&gt;
              Cases: {numeral(country.cases).format(&quot;0,0&quot;)}
            &lt;/div&gt;
            &lt;div className=&quot;info-recovered&quot;&gt;
              Recovered: {numeral(country.recovered).format(&quot;0,0&quot;)}
            &lt;/div&gt;
            &lt;div className=&quot;info-deaths&quot;&gt;
              Deaths: {numeral(country.deaths).format(&quot;0,0&quot;)}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Popup&gt;
      &lt;/Circle&gt;
    ));
  </code></pre>