API response is undefined when used, but not when console.log()

Question

I am trying to display data from https://api.coincap.io/v2/assets. I am getting the data in console, but when I try to display it in return() the data becomes undefined.

TypeError: Cannot read property '0' of undefined

    useEffect(() => {
        axios.get('https://api.coincap.io/v2/assets')
            .then(function (response) {
                setApiData(response.data.data)
                //console.log(response.data.data);
            })
            .catch(function (error) {
                console.log(error);
            })
    }, [])

console.log(apiData)
    return (
        <>
            {/*{apiData[0].id}*/}
        </>
    )
};

I think that it is the useEffect that I need to run again after the page has rendered?

Answer 1

First you should check if your array has data. By the way I didn't check the code, it will be something like this.

return (
    <>
      {apiData && apiData.length !== 0 ? apiData[0].id : "Please wait while fetching..."}
    </>