this.state.articles is undefined in React js - reactjs

Question

I am creating a news app for my project and what i am basically doing is fetching the arrays of news articles from the API and then storing it in a articles array in my local memory and then I am using the map method on that array and thus rendering the articles on my web page but now I'm getting this error:
image of the error
I looked at some similar question I think what I am having a problem with the scope of the constructor.
EDIT: I was wrong at the setstate part but i was just trying it out but the original code is this:
this.state = {
articles: this.articles
}
the above code is the original code in the place of setstate that was there before the below code is the complete code
articles = [];
constructor() {
super();
console.log(typeof articles);
this.state = {
articles: this.articles
}
// let category = 'top-headlines';
// let country = 'in';
}
async componentDidMount() {
const YOUR_API_KEY = 'cant show you this';
// let q = '';
let url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=${YOUR_API_KEY}`;
const FetchNews = async () => {
const response = await fetch(url);
const parsedjson = await response.json();
console.log(parsedjson);
this.setState({ articles: parsedjson.articles });
}
FetchNews();
}
render() {
return (
<div className="container p-1" style={{ backgroundColor: '#F0CE57' }}>
<div className="noogle">
<h1>Noogle</h1>
<input type="text" placeholder='Search News' />
</div>
<div className="row">
{this.state.articles.map((element) => {
return <div className="col-md-4" key={element.url}>
<NewsCard title={element.title} desc={element.description} imgurl={element.urlToImage} url={element.url} />
</div>
})}
</div>
</div>
)
}
}

Answer 1

Because this.state doesn't have a property called articles. It has a property called this which is set to... whatever this.setState returns while trying to set the state to this.articles, which also doesn't exist. This isn't at all what you want:
this.state = {
this: this.setState({ articles: this.articles })
}
I don't know where you pieced together that example, but it's all wrong. Just initialize the state value to an empty array:
this.state = {
articles: []
}
Then on initial render you simply have no records to display. And when the AJAX operation completes and sets the new state value you'll have records on the next re-render.
You don't need (or want) your global articles variable. It's going to tempt you to mutate values directly and cause strange bugs.

Answer 2

Why are you setting the state inside constructor. Instead when you are calling this.setState() function , it will set the state of articles
Try this code
articles = [];
constructor() {
super();
console.log(typeof articles);
this.state = {
articles : []
}
// let category = 'top-headlines';
// let country = 'in';
}