I try to fetch data from an API and display it on DOM and I'm using the fetched data as a prop to display but, when I try passing {input.bitcoin} as a prop React displays $[object Object] so I tried {input.bitcoin.usd} which ends up returning Uncaught TypeError: Cannot read properties of undefined (reading 'usd')
Here's my code:
li tag and there's just {coinPrice} prop inside and nothing else.import React from "react";
import { useState, useEffect } from "react";
import CoinListView from "./CoinListView";
const Main = () => {
const [input, setInput] = useState({});
const options = {
method: "GET",
headers: {
"X-RapidAPI-Host": "coingecko.p.rapidapi.com",
"X-RapidAPI-Key": "API-KEY",
},
};
const fetchData = async () => {
try {
const response = await fetch(
"https://coingecko.p.rapidapi.com/simple/price?ids=bitcoin,ethereum,litecoin,tether&vs_currencies=usd",
options
);
const data = await response.json();
const newData = data;
console.log(newData);
return setInput(newData);
} catch (err) {
return console.error(err);
}
};
useEffect(() => {
fetchData();
}, []);
return (
<div>
<div>
<div className="prices">
<CoinListView coinPrice={input.bitcoin} />
</div>
</div>
</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>