Struggling to get some data from api - reactjs

Question

Hi i'm trying to get some data from "currency API" (https://exchangeratesapi.io/)
and this is code below
App.js
import React, { useEffect, useState, Fragment } from "react";
import Header from "./Header";
import Table from "./dashboard/Table";
import { getLatest } from "../actions/currencyAction";
import { useDispatch, useSelector } from "react-redux";
function App() {
const latest = useSelector(state => state.latest);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getLatest());
}, []);
return (
<Fragment>
<Header />
{console.log(latest.rates)}
</Fragment>
);
}
export default App;
currencyAction.js
import { GET_LATEST } from "../actionType";
import axios from "axios";
export function getLatest() {
return dispatch => {
return axios.get("https://api.exchangeratesapi.io/latest").then(res => {
dispatch({ type: GET_LATEST, payload: res.data });
});
};
}
I succesfully got the data from api
<Fragment>
<Header />
{console.log(latest.rates)}
</Fragment>
{CAD: 1.4372, HKD: 8.4324, ISK: 139.3, PHP: 55.248, DKK: 7.4699, …}
CAD: 1.4372
HKD: 8.4324
ISK: 139.3
PHP: 55.248
DKK: 7.4699
HUF: 337.61
CZK: 25.186
AUD: 1.6384
RON: 4.8063
SEK: 10.5833
IDR: 15098.95
INR: 77.8265
BRL: 4.7474
RUB: 70.6675
HRK: 7.465
JPY: 120.52
THB: 34.336
CHF: 1.06
SGD: 1.5164
PLN: 4.2989
BGN: 1.9558
TRY: 6.6599
CNY: 7.6102
NOK: 10.1328
NZD: 1.7095
ZAR: 16.3592
but when I'm trying acces each currency, Everthing collapse..
<Fragment>
<Header />
{console.log(latest.rates.CAD)}
</Fragment>
TypeError: Cannot read property 'CAD' of undefined
App
C:/Users/82102/cb/src/components/App.js:17
14 |
15 | return (
16 | <Fragment>
> 17 | <Header />
| ^ 18 | {console.log(latest.rates.CAD)}
19 | </Fragment>
20 | );
I struggled for whole day long but I just can't figure out why it's happening..
please share your knowledge.. thank you

Answer 1

You're trying to access a property on rates before it has been loaded from the API.
The easy solution is to check its existence first:
Make sure rates is truthy (since typeof null === 'object' is also true),
Check type to see if its an object,
Then access the property.
{latest.rates && typeof latest.rates === 'object' && console.log(latest.rates.CAD)}

Answer 2

Because you use console.log in return causes an error.
You should do the following:
import React, { useEffect, useState, Fragment } from "react";
import Header from "./Header";
import Table from "./dashboard/Table";
import { getLatest } from "../actions/currencyAction";
import { useDispatch, useSelector } from "react-redux";
function App() {
const latest = useSelector(state => state.latest);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getLatest());
}, []);
// add here
console.log(latest.rates)
return (
<Fragment>
<Header />
// remove below line
// {console.log(latest.rates)}
</Fragment>
);
}
export default App;