Mortgage Calculator

Build a mortgage calculator: three inputs — loan amount, annual interest rate, and term in years — and one output, the monthly payment. As the user edits any input, the payment updates instantly. The interesting idea here isn't the (slightly gnarly) finance formula — it's that the payment is a derived value: it's computed from the inputs on every render, never stored in its own piece of state.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

Three controlled number inputs; the monthly payment is computed from them with the standard amortization formula.

Examples

$300,000 at 6.5% for 30 years  →  ~$1,896.20 / month
$300,000 at 0%   for 30 years  →  $833.33 / month   (no interest: P / n)
clear the amount               →  payment shows "—"

r = annualRate / 100 / 12          (monthly interest rate)
n = years * 12                     (number of monthly payments)
M = P * r * (1 + r)^n / ((1 + r)^n - 1)

Notes

• Derive, don't store. The payment is a pure function of the three inputs — compute it during render. Don't keep it in useState and try to keep it in sync; that's the classic redundant-state bug.
• Handle 0% interest. When r is 0 the formula divides by zero; fall back to M = P / n.
• Guard invalid input. Empty fields, zero term, or non-numbers should show a placeholder (e.g. "—"), not NaN or Infinity.
• Out of scope. Amortization schedules, taxes/insurance, extra payments — just the monthly principal-and-interest figure.