{this.state.articles.map((element)=>{ r" /> {this.state.articles.map((element)=>{ r" /> {this.state.articles.map((element)=>{ r"/>

When I try to run this code it gives me this error: Uncaught TypeError: Cannot read properties of undefined (reading 'map')

41 Views Asked by At
render() {
    return (
      <div className='container my-3'>
        <h2>NewsMonkey - Top Headlines</h2>
        <div className="row">
          {this.state.articles.map((element)=>{
            return <div className="col-md-4" key={element.url}>
            <NewsItem title={element.title?element.title:""} description={element.description?element.description:""} imageUrl={element.urlToImage} newsUrl={element.url}/>
          </div>
          })}
        </div>
      </div>
    )
  }
}

I was trying to make a news app using create-react-app and using news api and fetch api. But as soon as im using this function it is giving me the error mentioned above.

async componentDidMount(){
    let url="https://newsapi.org/v2/everything?q=cricket&from=2022-12-17&sortBy=publishedAt&apiKey=c0056c186f54461cb0601a1608ae1b54"
    let data = await fetch(url)
    let parsedData=await data.json
    console.log(parsedData)
    this.setState({articles:parsedData.articles})
  }
0

There are 0 best solutions below