import Head from "next/head"; import { useEffect, useState } from "react"; import { fetchData } from "../utils/api"; export default function Rates() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchDataFromApi = async () => { try { const apiData = await fetchData(); setData(apiData); } catch (error) { console.error("Error fetching data:", error); } finally { setLoading(false); // Set loading to false regardless of success or error } }; fetchDataFromApi(); }, []); const formatCurrency = (value) => { return new Intl.NumberFormat("en-NG", { style: "currency", currency: "NGN", }).format(value); }; // Your UI rendering logic here, using the 'data' state return (
EUR Rates

For €1 you'll get the following rates

{loading ? (

Loading...

) : ( data && (
{data.map((item) => (

{item.provider}: {formatCurrency(item.rate)}

))}
) )}
); }