React‑компонент обменника валют

Условие

Необходимо реализовать React‑компонент, представляющий два взаимосвязанных поля ввода — для рублей (RUB) и долларов (USD) — а также кнопку переключения ("<->") между ними.

• При вводе значения в первое поле (RUB) автоматически пересчитывается значение во втором (USD). Например, ввод 150 в поле RUB должен отобразить 1 в поле USD.
• При нажатии на кнопку переключения поля меняют свои позиции: поле RUB становится вторым, а поле USD — первым. При этом второе поле становится недоступным для ввода.
• Курс конвертации может различаться в зависимости от направления обмена: 150 RUB может соответствовать 1 USD, тогда как 1 USD может равняться, скажем, 75 RUB.

Требуется обеспечить корректную синхронизацию значений и правильную блокировку поля после смены направления.

Ответ

Храните направление и введённую сумму, второе поле вычисляйте из них. При переключении используйте прежний результат как новую исходную сумму и применяйте курс обратного направления.

import { useState } from 'react';
function Exchange() {
  const [from, setFrom] = useState('RUB');
  const [amount, setAmount] = useState('');
  const to = from === 'RUB' ? 'USD' : 'RUB';
  const value = Number(amount);
  const result = amount !== '' && Number.isFinite(value) && value >= 0
    ? (from === 'RUB' ? value / 150 : value * 75).toFixed(2) : '';
  return <section>
    <label>{from}<input type="number" min="0" step="any" value={amount}
      onChange={event => setAmount(event.target.value)} /></label>
    <button type="button" onClick={() => { setFrom(to); setAmount(result); }}>⇄</button>
    <label>{to}<input value={result} readOnly /></label>
  </section>;
}

Второе поле всегда только для чтения. Курсы 150 и 75 взяты из учебного условия, это не актуальные рыночные значения. Для финансовых расчётов понадобятся точная десятичная арифметика и согласованные правила округления.