title: Uncaught TypeError: Cannot read properties of undefined (reading 'map')
body: <p>I am getting this error</p>
  <blockquote>
  <p>Mainsection.js:27 Uncaught TypeError: Cannot read properties of undefined (reading 'map')</p>
  </blockquote>
  <p>Here is my mainsection.js file, I am using API key to iterate the data, I am still not getting the cause of the error. First I had made an array whose name was info and stored all the data in it and then iterated it, Now after using fetchapi, I deleted that array as it was of no use. I don't know whether it was meant to delete or not.</p>
  <pre><code>import React, { Component } from 'react'
  import Card from './Card'
  
  export default class Mainsection extends Component {
  
      constructor() {
          super();
          this.state = {
              info:null
          }
      }
  async componentDidMount(){
      let Url=&quot;https://randomuser.me/api/?inc=gender,name,nat,location,picture,email&amp;results=&quot;;
      let data= await fetch(Url);
      let parsedData= await data.json()
      console.log(parsedData);
      this.setState({
           info : parsedData.info
      })
  
  }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div className=&quot;container mt-5&quot;&gt;
                      &lt;div className=&quot;row&quot;&gt;
                          {this.state.info.map((element) =&gt; {
                              return &lt;div className=&quot;col-md-4&quot;&gt;
                                  &lt;Card key={element.email} name={element.name} location={element.location} gender={element.gender} imageUrl={element.picture.medium} /&gt;
                              &lt;/div&gt;
                          })}
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  </code></pre>
  <p>And here is my card.js file</p>
  <pre><code>import React, { Component } from 'react'
  
  export default class Card extends Component {
      render() {
          let {name, location, gender, imageUrl}=this.props
          return (
              &lt;div&gt;
                   &lt;div className=&quot;card&quot; style={{ width: &quot;18rem&quot; }}&gt;
              &lt;img src={imageUrl} className=&quot;card-img-top&quot; alt=&quot;...&quot; /&gt;
              &lt;div className=&quot;card-body&quot;&gt;
                  &lt;h5 className=&quot;card-title&quot;&gt;{name}&lt;/h5&gt;
                  &lt;p className=&quot;card-text&quot;&gt;{location}&lt;/p&gt;
                  &lt;p className=&quot;card-text&quot;&gt;{gender}&lt;/p&gt;
                  &lt;a href=&quot;/&quot; className=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  </code></pre>
  <p>Please let me I should provide more details</p>