Currency ConverterLoading saved progress…

Currency Converter

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.

Task

The starter App.tsx renders both inputs (100 and 92) and the rate label, with no logic. Make it convert:

  1. Hold both amounts. Keep usd and eur as two separate useState strings.
  2. Convert on edit. Typing in USD sets eur = usd * 0.92; typing in EUR sets usd = eur / 0.92. Round the displayed counterpart to 2 decimals.
  3. Write only the other field. Each input's onChange updates the field you typed in and its counterpart — never bind both fields to one shared value, or they will fight and loop.
  4. Handle empties. Clearing a field (empty or non-numeric) clears the other.

Examples

  • Type 50 in USD, and EUR shows 46.00.
  • Type 92 in EUR, and USD shows 100.00.
  • Clear the USD field, and EUR goes blank.

Notes

  • Compute the counterpart inside the handler. In USD's 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.
  • Two state values, not one. Each input binds to its own state (usd, eur), so the cursor never jumps and only the edited field drives the other.
  • Round for display only. Call toFixed(2) on the counterpart you write; keep the field you are typing in exactly as typed.
  • Styling (dark theme, inputs, rate label) is already in styles.css; focus on the state and handlers.
Loading editor…
Loading preview…