React JS can't able to render components from Array - reactjs

Question

When i try to render my component using map function it show error that this.state.articles is undefined but it work well when i use map function on componentDidMount() OR other functionsenter image description here
import React, { Component } from 'react'
import Items from './Items'
export default class News extends Component {
constructor() {
super()
this.state = {
articles: this.articles
}
}
async componentDidMount() {
let GET = 'https://newsapi.org/v2/top-headlines?country=us&apiKey=256fd7f5eed44e16b08f3e23cb2dabdb'
let Data = await fetch(GET)
let parse = await Data.json()
this.setState({ articles: parse.articles })
}
render() {
return (
<div className='container my-3'>
<h1>R News | Top Headlines</h1>
<div className='row'>
{
this.state.articles.map((ele)=>{
return <div></div>
})
}
</div>
</div>
)
}
}
k.imgur.com/ALxmx.png

Answer 1

I see that you're using this.articles in the constructor but I don't see it declared anywhere in your class. I think you meant to initialize your state with an empty array and you retrieve the articles from the backend:
constructor() {
super()
this.state = {
articles: []
}
}

Answer 2

The reason is because it takes time for the information to get back from newsapi.org so you can either use a async function or add a '?' which will be a check to see whether the article that came back from newsapi is back or not.
Try this render
return (
<div className='container my-3'>
<h1>R News | Top Headlines</h1>
<div className='row'>
{
this.state.articles?.map((ele, index)=>{
return <div key={index}></div>
})
}
</div>
</div>
)

Answer 3

This is because articles are undefined when the data is not yet loaded try this code,
import React, { Component } from 'react'
import Items from './Items'
export default class News extends Component {
constructor() {
super()
this.state = {
articles: this.articles
}
}
async componentDidMount() {
let GET = 'https://newsapi.org/v2/top-headlines?country=us&apiKey=256fd7f5eed44e16b08f3e23cb2dabdb'
let Data = await fetch(GET)
let parse = await Data.json()
this.setState({ articles: parse.articles })
}
render() {
return (
<div className='container my-3'>
<h1>R News | Top Headlines</h1>
<div className='row'>
{
this.state.articles && this.state.articles.map((ele)=>{
return <div></div>
})
}
</div>
</div>
)
}
}