I am creating this simple news app with dotnet webapi and react. I want to fetch the news from my backend. The API is working fine, I have tested it, but somehow my useEffect won't run and I can't fetch the data. What am I doing wrong and what is the proper way of doing this? Any help will be appreciated!
Here's my app.js where the fetching should be working.
import './App.css';
import axios from 'axios';
import ArticleList from './/components/ArticleList.jsx';
function App() {
const [articles, setArticles] = useState(null)
useEffect(() => {
console.log('If it works, this should be shown!')
axios.get('https://localhost:7112/News').then(response => {
setArticles(response.data)
console.log(articles)
});
},[]);
return (
<div className="App">
<ArticleList articles={articles}/>
</div>
);
}
export default App;
import ArticleListItem from './ArticleListItem.jsx'
export default function ArticleList(articles) {
return (
<>
{articles && articles.map(article => (<ArticleListItem key={article.title} article={article} />
))}
</>
)
}
There's the component which throws error: articles.map is not a function.
The error does not come from useEffect neither tha App component . But ArticleList it self when you pass articles as a props to ArticleList component and before mapping it you have to check if you have articles first :
You can do something like this :
{props.articles && props.articles.map(...)
You need to check articles to render Loading or ArticleList
{articles && <ArticleList articles={articles}/>}
or you set initial value for articles state:
const [articles, setArticles] = useState([])