I’ve recently started my web dev journey, and decided to learn some javascript to mess with APIs in order to learn how to perform the fetch (for starters) from a public API. My first attempt at this is by trying to integrate a live BTC API in my portfolio. Although ChatGPT says this is correct and the information should be displayed, the is nothing being displayed besides the title.
API – CoinDeskAPI

This is my CoinDeskAPI.jsx component:

import { useEffect, useState } from "react";

export const CoinDeskAPI = () => {
  const [btcData, setBtcData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json');
        if (!response.ok) {
          throw new Error('Failed to fetch Bitcoin data');
        }
        const data = await response.json();
        setBtcData(data);
      } catch (error) {
        console.error('Error fetching Bitcoin data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <article className="flex flex-col gap-2 flex-grow">
      <header className="flex w-full flex-row justify-between gap-2">
        <h3 className="text-xl text-neutral-950">
          API Testing (<a className="hover:text-blue-500 after:content-['_↗']" href="https://api.coindesk.com/v1/bpi/currentprice.json" target="_blank" rel="noreferrer"> CoinDeskAPI</a>)
        </h3>
      </header>
      <p className="w-auto max-w-[60ch] leading-6 text-base">Displaying live BTC values, first API test!</p>
      
      <article>
        {btcData && (
          <ul>
            <li>BTC Rate (USD): {btcData.bpi.USD.rate}</li>
            <li>BTC Rate (EUR): {btcData.bpi.EUR.rate}</li>
            <li>BTC Rate (GBP): {btcData.bpi.GBP.rate}</li>
          </ul>
        )}
      </article>

    </article>
  );
};

and this is how I’m passing it to my index.astro file:

---
...other imports

import { CoinDeskAPI } from "../components/CoinDeskAPI.jsx";
---


<Layout title="Portfolio">
    <main class="flex flex-col gap-20">
          
                <!-- More code...  -->
            
        <!-- Bitcoin API section -->
        <CoinDeskAPI />
                
        
          
        </main>
</Layout>