Build a Currency Converter - Build a Currency Converter

Curriculum Help
1

Tell us what’s happening:

Hey, so I am stuck at Test Case #8 where changing the value of the second element should display the new converted amount and currency.

I’m confused because in order to display the new amount, I have to recalculate but if I do that through the memo function, Test Case #6 fails. Any advice?

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: styles.css */
body{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
}

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

export function CurrencyConverter() {
  const [amount, setAmount] = useState(0);
  const [convertTo, setConvertTo] = useState("USD");
  const [convertFrom, setConvertFrom] = useState("USD");

  const conversion = {
    "USD": 1,
    "EUR": 0.88,
    "GBP": 0.75,
    "JPY": 162.20
  }

  const convertAmount = useMemo(() => {
    console.log("Converting...")
    return ((amount / conversion[convertFrom]) * conversion[convertTo]);
  }, [amount, convertFrom])
  

  return (
    <div>
      <h1>Currency Converter</h1>
      <label>
        Amount:
        <input
          type="number"
          value={amount}
          onChange={e => setAmount(e.target.value)}
        />
      </label>
      
      <p>From:</p>
      <select value={convertFrom} onChange={e => setConvertFrom(e.target.value)}>
        {Object.keys(conversion).map(currency => (
          <option key={currency} value={currency}>{currency}</option>
        ))}
      </select>

      <p>To:</p>
      <select value={convertTo} onChange={e => setConvertTo(e.target.value)}>
        {Object.keys(conversion).map(currency => (
          <option key={currency} value={currency}>{currency}</option>
        ))}
      </select>

      <div>
        <h3>Converting From {convertFrom} to {convertTo}</h3>
        <p>{convertAmount.toFixed(2)} {convertTo}</p>
      </div>
    </div>
  );

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

Challenge Information:

Build a Currency Converter - Build a Currency Converter

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-currency-converter/67eaa957114d373deb3a9149.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

I guess the question might be - how to do it, so there’s no recalculation when target currency is changed, and at the same time displayed value is correct for different currencies?