Hello im trying to use a “custom hook” to make a API request to CoinMarketCap API.
Im not sure what im doing wrong I tried basing my code on the given sample from their docs (Node.js): https://coinmarketcap.com/api/documentation/v1/#section/Quick-Start-Guide
Thank you for any help!!
import React, { useState, useEffect } from "react";
import logo from "../../images/bitcoin-logo.png";
import ethereum from "../../images/ethereum-48.png";
import cardano from "../../images/cardano-48.png";
import "./BitcoinPrice.css";
import axios from "axios"
const CoinMarketCap = () => {
const [price, setPrice] = useState(null);
const [loading, setLoading] = useState(true);
const intervalid = setInterval(
useEffect(() => {
fetch('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest', {
method: "GET",
qs: {
'start': '1',
'limit': '5000',
'convert': 'USD'
},
header: {
'X-CMC_PRO_API_KEY': 'aaaa-asdfadf-adfadf-asdfadsf-asdf'
},
json: true,
qzip: true
})
.then((res) => res.json())
.then((data) => {
console.log(data);
// setPrice(data.USD.last);
// setLoading(false);
})
.catch((error) => {
console.log(error);
});
}, []))
clearInterval(intervalid);
return (
<div className="btc">
<img className="btc-logo" src={logo} alt="Bitcoin" />
<span className="btc-price">
{loading ? "LOADING" : "$" + price}
</span>
<img className="btc-logo" src={ethereum} alt="Bitcoin" />
<span className="btc-price">
{loading ? "LOADING" : "$" + price}
</span>
<img className="btc-logo" src={cardano} alt="Bitcoin" />
<span className="btc-price">
{loading ? "LOADING" : "$" + price}
</span>
</div>
);
};
export default CoinMarketCap;