Build a two-field currency converter as a single React component. The top field is US dollars, the bottom is euros, and a fixed rate — 1 USD = 0.92 EUR — links them. Type in either field and the other recomputes. The real challenge is wiring the two-way binding without an infinite update loop.
The starter App.tsx renders both inputs (100 and 92) and the rate label, with no logic. Make it convert:
usd and eur as two separate useState strings.eur = usd * 0.92; typing in EUR sets usd = eur / 0.92. Round the displayed counterpart to 2 decimals.onChange updates the field you typed in and its counterpart — never bind both fields to one shared value, or they will fight and loop.50 in USD, and EUR shows 46.00.92 in EUR, and USD shows 100.00.onChange, write both usd and the derived eur. Do not set up one effect that watches usd and writes eur plus another that watches eur and writes usd — that is the loop.usd, eur), so the cursor never jumps and only the edited field drives the other.toFixed(2) on the counterpart you write; keep the field you are typing in exactly as typed.styles.css; focus on the state and handlers.