title: TypeError: Cannot read properties of undefined (reading 'map') I'm getting error in these lines
body: <p>import React, { Component } from 'react'
  import NewsItem from './NewsItem'
  import { Spinner } from './Spinner';
  import PropTypes from 'prop-types'</p>
  <p>export class News extends Component {
  static defaultProps = {
  country : 'in',
  pageSize : 8,
  category: 'General'
  }</p>
  <pre><code>    static propTypes = {
        country : PropTypes.string,
        pageSize : PropTypes.number,
        category: PropTypes.string
      }
  
  
      constructor() {
            super();
            this.state ={
                articles: [],
                loading: true,
                page: 1
            }
        }
  
        async updateNews(){
          const url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&amp;category=${this.props.category}&amp;apikey=dbe57b028aeb41e285a226a94865f7a7&amp;page=${this.state.page}&amp;pageSize=${this.props.pageSize}`;
          this.setState({ loading: true });
          let data = await fetch(url);
          let parsedData = await data.json()
          this.setState({
              articles: parsedData.articles,
              totalResults: parsedData.totalResults,
              loading: false
          })
      }
        async componentDidMount(){
          this.updateNews();
        }
  
        handelPreviousClick = async()=&gt;{
          this.setState({page : this.state.page - 1});
          this.updateNews();
        }
  
        handelNextClick = async()=&gt;{
          this.setState({ page: this.state.page + 1});
          this.updateNews();
        }
      
      render(){
      return ( 
        &lt;div&gt;
             &lt;div className='container my-3'&gt;
                  &lt;h1 className='text-center' style={{color: &quot;#404040&quot;}}&gt;&lt;b&gt;THENewsWorld&lt;/b&gt; - Top Headlines&lt;/h1&gt;
                  {this.state.loading &amp;&amp; this.state.loading &amp;&amp; &lt;Spinner/&gt;}
                  **&lt;div className=&quot;row&quot;&gt;
                  {!this.state.loading &amp;&amp; this.state.articles.map((element)=&gt;{**
                  return &lt;div key={element.url} className=&quot;col-md-4&quot;&gt;
                  &lt;NewsItem key={element.url} title={element.title?element.title.slice(0,40):&quot;&quot;} description={element.description?element.description:&quot;&quot;} imageUrl={element.urlToImage} newsUrl={element.url} author={element.author} date={element.publishedAt} source={element.source.name}/&gt;     
                  &lt;/div&gt;
                  })}
                  &lt;/div&gt;
             &lt;/div&gt;
             &lt;div className='container d-flex justify-content-between'&gt;
             &lt;button disabled={this.state.page&lt;=1} type=&quot;button&quot; className=&quot;btn btn-dark&quot; onClick={this.handelPreviousClick}&gt;&amp;#8592; Previous&lt;/button&gt;
             &lt;button  disabled={this.state.page + 1&gt; Math.ceil(this.state.totalResults/this.props.pageSize)} type=&quot;button&quot; className=&quot;btn btn-warning&quot; onClick={this.handelNextClick}&gt;Next &amp;#8594;&lt;/button&gt;
             &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  <p>I'm getting error in these bold lines and my code work properly but suddenly it start giving these errors....</p>