Estoy tratando de obtener datos del sitio web de newsapi. Me da datos como matriz como formato de objeto.

Ahora, mi objetivo es iterar estos datos y mostrar mi componente newsItem. Aquí está mi código a continuación.

 export class News extends Component { constructor(){ super() this.state = { articles: this.articles } } componentDidMount(){ fetch(`https://newsapi.org/v2/top-headlines?country=us&apiKey=d21fe13361b94006b816f98a7c005003`) .then(res =>res.json()) .then(data => this.setState({articles:data.articles})) } render() { return <div className='container my-3'> <h1 className='my-3'>NewsDonkey - Top Headlines</h1> <div className="row"> {this.state.articles.map(element=> console.log(element))} <div className="col-md-4"> <NewsItem/> </div> </div> </div>; } } export default News;

pero, los programas del navegador no pueden leer las propiedades de undefined. Aquí está la imagen del error.

Ahora, puede decir que los datos pueden estar en formato de objeto, por eso el método de mapa no funciona. Probé la misma codificación en JS: artículos. mapa (elemento => consola. registro (elemento)) extrajo datos perfectamente. Por favor, ayúdenme si encuentran algún error en mi codificación.