Describe the Issue
The lab gives a pass with a faulty solution. Used useMemo() as useEffect() to trigger calculations using dependencies when input or select elements change. Not adding the second select element state to dependencies helps passing test 6: "Changing the value of the second select element should not cause the converted amounts to be recalculated." and so passing the lab.
Affected Page
https://www.freecodecamp.org/learn/full-stack-developer/lab-currency-converter/build-a-currency-converter
Your code
const { useState, useMemo } = React;
export function CurrencyConverter() {
const currencies = {
USD: 1,
EUR: 0.92,
GBP: 0.78,
JPY: 156.7
};
const [input, setInput] = useState(1);
const [result, setResult] = useState("");
const [select1, setSelect1] = useState("USD");
const [select2, setSelect2] = useState("EUR");
const converterMaybe = useMemo(() => {
let r = (input / currencies[select1] * currencies[select2]).toFixed(2);
setResult(r)
}, [input, select1]);
return (
<div id="converter-container">
<label htmlFor="input-number">{select1} to {select2}:</label>
<input id="input-number" type="number" value={input} onChange={(e) => setInput(e.target.value)} />
<label htmlFor="select-from">Select currency to convert:</label>
<select id="select-from" value={select1} onChange={(e) => setSelect1(e.target.value)}>{
Object.keys(currencies).map((curr) => (<option key={curr} value={curr}>{curr}</option>))
}</select>
<label htmlFor="select-to">Select target curremcy:</label>
<select id="select-to" value={select2} onChange={(e) => setSelect2(e.target.value)}>{
Object.keys(currencies).map((curr) => (<option key={curr} value={curr}>{curr}</option>))
}</select>
<p id="result">Result:{result} {select2}</p>
</div>
)
}
Expected behavior
Lab should fail since the app gives a wrong result. Also this answer does not make a correct use of memoization, passing without getting a grasp of what the lab was actually about.
Screenshots
No response
System
- Device: Desktop
- OS: Windows11
- Browser: Edge
- Version: 140.0.3485.81
Additional context
I tried looking into the repository to check what the evaluator is testing and help find the source of the issue but unfortunately it's a bit too advanced for me. And about a possible solution, adding a check for a specific result from the converter when changing the second option would result in a fail and prevent passing the lab with a non-working converter, but would not actually prevent the misuse of the useMemo() method. Again this is a bit to advanced for me to understand what a suitable fix could be.. sorry for that.
Describe the Issue
The lab gives a pass with a faulty solution. Used useMemo() as useEffect() to trigger calculations using dependencies when input or select elements change. Not adding the second select element state to dependencies helps passing test 6: "Changing the value of the second select element should not cause the converted amounts to be recalculated." and so passing the lab.
Affected Page
https://www.freecodecamp.org/learn/full-stack-developer/lab-currency-converter/build-a-currency-converter
Your code
Expected behavior
Lab should fail since the app gives a wrong result. Also this answer does not make a correct use of memoization, passing without getting a grasp of what the lab was actually about.
Screenshots
No response
System
Additional context
I tried looking into the repository to check what the evaluator is testing and help find the source of the issue but unfortunately it's a bit too advanced for me. And about a possible solution, adding a check for a specific result from the converter when changing the second option would result in a fail and prevent passing the lab with a non-working converter, but would not actually prevent the misuse of the useMemo() method. Again this is a bit to advanced for me to understand what a suitable fix could be.. sorry for that.