CODEWITHSUNDEEP
javascriptreactjsfetch-api
Jay
Jay

Reputation: 1

API giving data in second render in React

I was trying to fetch API with react.js but on first render its gives nothing and the second render its gives data. This makes it so when I try to access the data later for an image I get an error:

TypeError: Cannot read property 'news.article' of undefined, because it is initially empty.

How can I solve this?

photo

Here is my code ..

import React, { useEffect, useState } from 'react';

const HomeContent = () => {
    const [news, updateNews] = useState([]);
    console.log(news);
    useEffect(() => {
        const api = 'http://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=940c56bd75da495592edd812cce82149'
        fetch(api)
            .then(response => response.json())
            .then(data => updateNews(data))
            .catch((error) => console.log(error))
    }, [])

    return (
        <>

        </>
    );
};

export default HomeContent;

Upvotes: 0

Views: 348

Answers (1)

s6eskand
s6eskand

Reputation: 78

There is no issue with the code itself, the output you receive is expected. However, you can render the content after it is retrieved as such

import React, { useEffect, useState } from 'react';

const HomeContent = () => {
    const [news, updateNews] = useState([]);
    const [isLoading, setIsLoading] = useState(true);    

    console.log(news);
    useEffect(() => {
        const api = 'http://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=940c56bd75da495592edd812cce82149'
        fetch(api)
            .then(response => response.json())
            .then(data => { 
                updateNews(data.articles);
                setIsLoading(false);
            })
            .catch((error) => {
               console.log(error);
               setIsLoading(false);
            })
    }, [])

    return (
        <>
            {isLoading ? 
                <p>Loading...</p> :
                // Some JSX rendering the data
            }
        </>
    );
};

export default HomeContent;

Upvotes: 1

Related Questions