Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

My code doesn’t work and I don’t know why, can’t pass test 6 or 8 depending the value of useMemo dependency

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Currency Converter</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { CurrencyConverter } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<CurrencyConverter />);
    </script>
</body>

</html>

/* file: index.jsx */
const { useState, useMemo } = React;

export function CurrencyConverter() {
  const [ amount, setAmount ] = useState(1);
  const [ fromCurrency,  setFromCurrency ] = useState("USD");
  const [ toCurrency,  setToCurrency ] = useState("EUR");

  const currencies = {
    USD: { EUR: 0.84, GBP: 0.72, JPY: 153.32 },
    EUR: { USD: 1.20, GBP: 0.87, JPY: 183.27 },
    GBP: { USD: 1.38, EUR: 1.15, JPY: 211.65 },
    JPY: { USD: 0.0065, EUR: 0.0055, GBP: 0.0047 }
  }

  const currenciesKeys = Object.keys(currencies);

  const conversion = useMemo(() => {
    const amountToNumber = Number(amount);

    if (fromCurrency === toCurrency) return amountToNumber.toFixed(2);

    return (amountToNumber * currencies[fromCurrency][toCurrency]).toFixed(2);
  }, [amount, fromCurrency, toCurrency]);

  return (
    <main>
      <h2>Currency Converter</h2>

      <p>
        {fromCurrency} to {toCurrency} Conversion
      </p>

      <input
        type="number"
        value={amount}
        onChange={(e) => setAmount(Number(e.target.value))}
      />

      <label>
        Start Currency:

        <select
          onChange={(e) => setFromCurrency(e.target.value)}
          defaultValue={fromCurrency}
        >
          {currenciesKeys.map((i) => <option key={i} value={i}>{i}</option>)}
        </select>
      </label>

      <label>
        Target Currency:

        <select
          onChange={(e) => setToCurrency(e.target.value)}
          defaultValue={toCurrency}
        >
          {currenciesKeys.map((i) => <option key={i} value={i}>{i}</option>)}
        </select>
      </label>    

      <p>{conversion} {toCurrency}</p>
    </main>
  )
}

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Challenge Information:

Build a Currency Converter - Build a Currency Converter