title: TypeError: Cannot read properties of undefined (reading 'map') React JS
body: <p>I am facing the error <code>TypeError: Cannot read properties of undefined (reading 'map')</code></p>
  <p>This code should return the name of the city in a card title which is defined in my other file but throwing an error.</p>
  <p>Codes:</p>
  <pre><code>import React, {Component} from 'react';
  import Body from './Body';
  
  class Weather extends Component {
    constructor(props) {
      super(props);
      this.state = {
        weather: [],
      };
    }
  
    async componentDidMount() {
      const url = `http://api.weatherapi.com/v1/current.json?key=${this.props.api}&amp;q=Jaipur&amp;aqi=no`;
      let data = await fetch(url);
      let parsedData = await data.json();
      this.setState({
        weather: parsedData.weather,
      });
    }
  
    render() {
      return (
        &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;row&quot;&gt;
            {this.state.weather.map((element) =&gt; {
              return (
                &lt;div className=&quot;col-md-4&quot;&gt;
                  &lt;Body city={element.location.name} /&gt;
                &lt;/div&gt;
              );
            })}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Weather;
  </code></pre>