Can anyone guide me in a simple question in React.js?

I am fetching an API and assigning its data to an object by using setArticles. Problem is, I am mapping on "articles.map()" this data in Functional component and get an error, because state articles have null value before fetching data. Please see screenshot attached if I am not making sense, sorry for that.

Issue is, component gets rendered first, and at that render time, "articles" have no value, and I am assigning it a value after fetching.
Question is

How can I fetch data and use it in a component?

Top comments (3)

9hnd5 • Jun 3 '23

There several things we need to discuss here

It is recommended to always fetch data from an effect rather than directly in a component.
It is advisable to format your code for better readability. Properly formatted code enhances code comprehension and makes it easier for others to collaborate on the project

The correct version maybe look like:

export default function News(){
      const [articles, setArticles] = React.useState([]);

      articles.map(data => console.log(data));

      React.useEffect(async () => {
            const result = await fetch(...);
            const articles = result.json();
            setArticles(articles);
      }, ['your dependencies'])
}