TypeError: Cannot read properties of undefined (reading 'map') I'm getting error in these lines - reactjs

Question

import React, { Component } from 'react'
import NewsItem from './NewsItem'
import { Spinner } from './Spinner';
import PropTypes from 'prop-types'
export class News extends Component {
static defaultProps = {
country : 'in',
pageSize : 8,
category: 'General'
}
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}&category=${this.props.category}&apikey=dbe57b028aeb41e285a226a94865f7a7&page=${this.state.page}&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()=>{
this.setState({page : this.state.page - 1});
this.updateNews();
}
handelNextClick = async()=>{
this.setState({ page: this.state.page + 1});
this.updateNews();
}
render(){
return (
<div>
<div className='container my-3'>
<h1 className='text-center' style={{color: "#404040"}}><b>THENewsWorld</b> - Top Headlines</h1>
{this.state.loading && this.state.loading && <Spinner/>}
**<div className="row">
{!this.state.loading && this.state.articles.map((element)=>{**
return <div key={element.url} className="col-md-4">
<NewsItem key={element.url} title={element.title?element.title.slice(0,40):""} description={element.description?element.description:""} imageUrl={element.urlToImage} newsUrl={element.url} author={element.author} date={element.publishedAt} source={element.source.name}/>
</div>
})}
</div>
</div>
<div className='container d-flex justify-content-between'>
<button disabled={this.state.page<=1} type="button" className="btn btn-dark" onClick={this.handelPreviousClick}>← Previous</button>
<button disabled={this.state.page + 1> Math.ceil(this.state.totalResults/this.props.pageSize)} type="button" className="btn btn-warning" onClick={this.handelNextClick}>Next →</button>
</div>
</div>
)
}
}
I'm getting error in these bold lines and my code work properly but suddenly it start giving these errors....