0
160
Vistasmap is not a function cannot fetch data from api
I have an issue fetching data from api, when map through my array of data i am getting error message that map is not function. I have fetched the data on the index page then passed it as props to the coinlist components. I cannot spot my error here.I have put the relevant components below. Thank for your time in advance. Leo
Coinlist
import Coins from './Coins';
export default function CoinList({filteredCoins}) {
return (
console.log(filteredCoins),
filteredCoins.map(coin => {
return (
<Coins
key={coin.id}
name={coin.name}
id={coin.id}
price={coin.current_price}
symbol={coin.symbol}
marketcap={coin.total_volume}
volume={coin.market_cap}
image={coin.image}
priceChange={coin.price_change_percentage_24h}
/>
);
}))
)}
index.js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import Header from '../components/Header';
import CoinList from '../components/CoinList';
export default function Home({filteredCoins}) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
<main className={styles.main}>
<CoinList filteredCoins={filteredCoins}/>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
export const getServerSideProps = async () => {
const res = await fetch(
`https://api.coingecko.com/api/v3/coins/
markets?vs_currency=usd&order=market_cap_
desc&per_page=50&page=1&sparkline=false`);
const filteredCoins = await res.json();
return {
props: {
filteredCoins
}
};
};
Coins
function Coins ({name}) {
return (
<h1>{name}</h1>
);
}
export default Coins;
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
your fix is props.filteredCoins.filteredCoins.map(coin => {
can you try this, directly don't try to wrap it around the object,
return {
props: {
filteredCoins
}
};
or else use it like, as you wrapped it inside props of filteredCoins of filteredCoins,
//console.log(filteredCoins),
//props.filteredCoins.filteredCoins.map(coin => {
so below is simple approach avoids wrapping of array into {} object,
export const getServerSideProps = async () => {
const res = await fetch(
`https://api.coingecko.com/api/v3/coins/
markets?vs_currency=usd&order=market_cap_
desc&per_page=50&page=1&sparkline=false`);
const filteredCoins = await res.json();
return filteredCoins;
};
this is what you have done,
·
Juan Pablo Isaza
Denunciar
Responde la pregunta