props.stories.map is not a function? - reactjs

Question

Hi I'm trying to make a simple news app to learn react. Keep getting an error which I don't understand. Why app worked fine with a json placeholder api. However now it's displaying the error props.stories.map is not a function.
Here is my code.
import NewsList from './components/NewsList';
class App extends React.Component {
constructor() {
super()
this.state = {
stories: [],
}
}
componentDidMount() {
fetch(`https://newsapi.org/v2/top-headlines?country=gb&apiKey=${API_KEY}`)
.then(res => res.json()
.then(data => this.setState({stories: data}))
)
}
render(){
const { stories } = this.state
return (
<div className="App">
<NewsList stories={stories} />
</div>
);
}
}
import Story from './Story'
import styled from 'styled-components'
const NewsList = props => {
return(
<NewsListWrapper>
{
props.stories.map(story => (
<Story story={story} />
)
)
}
</NewsListWrapper>
)
}
import React from 'react';
import styled from 'styled-components';
export const Story = props => (
<StoryWrapper>
<h2>{props.story.title}</h2>
<p>{props.story.author}</p>
<p>{props.story.articles}</p>
</StoryWrapper>
)
I have console.log the api response and the data was being received fine. It's simply when I use this other api response.
And I've hidden my api_key just for this post, so it's not issues with that.
Thanks for any advice.

Answer 1

In New API documentation (https://newsapi.org/docs/endpoints/top-headlines) you can see that your request return object of form
{
status: string
totalResults: number
articles: Array
}
So you need to set to stories not data but data.articles:
fetch(`https://newsapi.org/v2/top-headlines?country=gb&apiKey=${API_KEY}`)
.then(res => res.json()
.then(data => this.setState({stories: data.articles}))
)

Answer 2

Try this,
import NewsList from './components/NewsList';
class App extends React.Component {
constructor() {
super()
this.state = {
stories: [],
storiesData:[]
}
}
componentDidMount() {
fetch(`https://newsapi.org/v2/top-headlines?country=gb&apiKey=${API_KEY}`)
.then(res => res.json()
.then(data => this.setState({stories: data}))
)
}
render(){
const { stories } = this.state
return (
<div className="App">
<NewsList stories={stories} />
</div>
);
}
}
import Story from './Story'
import styled from 'styled-components'
const NewsList = props => {
console.log(props.stories);
this.setState({storiesData:props.stories});
return(
<NewsListWrapper>
{
this.state.storiesData.map(story => (
<Story story={story} />
)
)
}
</NewsListWrapper>
)
}
import React from 'react';
import styled from 'styled-components';
export const Story = props => (
<StoryWrapper>
<h2>{props.story.title}</h2>
<p>{props.story.author}</p>
<p>{props.story.articles}</p>
</StoryWrapper>
)