[FIXED] Why won't the useEffect hook run and fetch data?

Issue

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.

Solution

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(...)

Answered By - monim

Answer Checked By - Mildred Charles (PHPFixing Admin)