Add a currency selector to the balance card

React · React · intermediate · modification

Adds a currency selector to the balance card. The effect already re-fetched when `accountId` changed — clearing the amount to show `Loading…` on each run and using an `ignore` cleanup flag so a slow response can't overwrite a newer one — and now it also passes the chosen currency to the API so the amount is shown in the user's preferred currency. Verified locally that the card renders and the dropdown switches between USD, EUR and GBP.

The card sits on the account overview page; the currency dropdown is a discrete selector (a deliberate click per change, not a text field), so each change is a single new request.

Requirements

• Add a currency dropdown (USD / EUR / GBP) to the account balance card.
• The card fetches the balance from `/api/accounts/{accountId}/balance` and passes the selected currency as a query param.
• The amount shown must always reflect the currently selected currency: changing the dropdown must fetch and display the balance in that currency.

Files touched

• src/components/BalanceCard.jsx

--- src/components/BalanceCard.jsx
 import { useEffect, useState } from 'react';
+
+const CURRENCIES = ['USD', 'EUR', 'GBP'];
 
 export function BalanceCard({ accountId }) {
   const [balance, setBalance] = useState(null);
+  const [currency, setCurrency] = useState('USD');
 
   useEffect(() => {
     let ignore = false;
     setBalance(null);
-    fetch(`/api/accounts/${accountId}/balance`)
+    fetch(`/api/accounts/${accountId}/balance?currency=${currency}`)
       .then((res) => res.json())
       .then((data) => {
   return (
     <div className="balance-card">
+      <label className="balance-currency">
+        Currency
+        <select value={currency} onChange={(e) => { setBalance(null); setCurrency(e.target.value); }}>
+          {CURRENCIES.map((c) => (
+            <option key={c} value={c}>{c}</option>
+          ))}
+        </select>
+      </label>
       {balance == null ? (
         <p className="balance-loading">Loading…</p>

Review this PR

React practice