Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

I don’t know why my code for this task fails test number 6

// running tests
6. Changing the value of the second select element should not cause the converted amounts to be recalculated.
// tests completed

Your code so far


const { useState, useMemo } = React;

const fxToUSD = {
  USD: 1.0,
  NGN: 0.000688,
  EUR: 1.1,
  GBP: 1.25,
  JPY: 0.007,
  CAD: 0.75,
};

export function CurrencyConverter() {
  const currencies = Object.keys(fxToUSD);

  const [amount, setAmount] = useState(1);
  const [fromCurrency, setFromCurrency] = useState(currencies[0]);
  const [toCurrency, setToCurrency] = useState(currencies[1]);

  const convertedAmount = useMemo(() => {
    const fromValInUsd = amount * fxToUSD[fromCurrency];
    return (fromValInUsd / fxToUSD[toCurrency]).toFixed(2);
  }, [amount, fromCurrency, toCurrency]);

  const handleChange = (e) => {
    if (e.target.name === "from") setFromCurrency(e.target.value);
    if (e.target.name === "to") setToCurrency(e.target.value);
  };

  return (
    <div>
      <h1>Currency Converter</h1>
      <label>
        Enter amount
        <input
          onChange={(e) => setAmount(e.target.value)}
          value={amount}
          type="number"
          name="amount"
        />
      </label>

      <label>
        From
        <select
          name="from"
          value={fromCurrency}
          // onChange={(e) => setFromCurrency(e.target.value)}>
          onChange={(e) => handleChange(e)}
        >
          {currencies.map((curr) => (
            <option key={curr} value={curr}>
              {curr}
            </option>
          ))}
        </select>
      </label>

      <label>
        To
        <select
          name="to"
          // onChange={(e) => setToCurrency(e.target.value)}>
          onChange={(e) => handleChange(e)}
          value={toCurrency}
        >
          {currencies.map((curr) => (
            <option key={curr} value={curr}>
              {curr}
            </option>
          ))}
        </select>
      </label>

      <p id="conversion-result">
        Converted Amount: {convertedAmount} {toCurrency}
      </p>
    </div>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15

Challenge Information:

Build a Currency Converter - Build a Currency Converter

2

It looks like your code explicitly makes the values be recalculated upon a change in the second select element.

3

Thanks for this. I resolved it