I have an array of currencies that I'd like to map out. But I'm not sure how? My app crashes with the code I wrote and returns an empty page with an error: currencyList.map is not a function
This is what I get when I console.log the fetched data:
AED: {currencyName: 'UAE Dirham', id: 'AED'}
AFN: {currencyName: 'Afghan Afghani', currencySymbol: '؋', id: 'AFN'}
ALL: {currencyName: 'Albanian Lek', currencySymbol: 'Lek', id: 'ALL'}
AMD: {currencyName: 'Armenian Dram', id: 'AMD'}
ANG: {currencyName: 'Netherlands Antillean Gulden', currencySymbol: 'ƒ', id: 'ANG'}
AOA: {currencyName: 'Angolan Kwanza', id: 'AOA'}
There are lots more entries there..
anyways this is my code
const [currencyList, setCurrencyList] = useState<any>();
useEffect(() => {
axios.get(listOfCurrencies)
.then(res => {
setCurrencyList(res.data['results']);
console.log(res.data['results'])
})
.catch(error => {
console.log("there was an error with connecting to database")
})
}, []);
return (
<div>
<h1> data will be here </h1>
{currencyList && currencyList.map(curr => {
return(
<div>
{curr}
</div>
)
})}
</div>
)
For what I understand, you have an object, not an array as response, kind of:
const currencyList = {
AED: {currencyName: 'UAE Dirham', id: 'AED'}
AFN: {currencyName: 'Afghan Afghani', currencySymbol: '؋', id: 'AFN'}
ALL: {currencyName: 'Albanian Lek', currencySymbol: 'Lek', id: 'ALL'}
AMD: {currencyName: 'Armenian Dram', id: 'AMD'}
ANG: {currencyName: 'Netherlands Antillean Gulden', currencySymbol: 'ƒ', id: 'ANG'}
AOA: {currencyName: 'Angolan Kwanza', id: 'AOA'}
}
So there's no map in objects. You'll need to get the keys, for example:
Object.keys(currencyList).map(
key => <div>{currencyList[key].id}</div>
)
If you want to get the values,
Object.values(currencyList)
// You can save Object.values(res?.data?.results || {}) into the currencyList too,
// e.g. setCurrencyList(Object.values(res?.data?.results || {})
then it will become an array with all the values object. If you want to map it and pass into a component,
Object.values(currencyList).map(currency => <Component item={currency} key={currency.id} />)