estoy con un dilema, nose si es una contradiccion del enunciado, error de test o yo no puedo resolver la logica. Pero el cogido asi como esta, me tira este error:
” Cambiar el valor del segundo elemento select no debería causar recalculación de los montos convertidos.”
Este error se va quitando target de las dependencias del useMemo, pero si la quito me arroja otro error:
”Cambiar el valor del segundo elemento select debería mostrar la nueva cantidad convertida y la moneda.”
Es algo contradictorio, alguien lo pudo resolver ?
const { useState, useMemo } = React;
export function CurrencyConverter() {
const \[start, setStart\] = useState('USD');
const \[target, setTarget\] = useState('EUR');
const \[amount, setAmount\] = useState(1);
const currencies = \[
{ currency: "USD", value: 1 },
{ currency: "EUR", value: 0.92 },
{ currency: "GBP", value: 0.78 },
{ currency: "JPY", value: 156.7 }
\];
const result = useMemo(() => {
const from = currencies.find(c => c.currency === start);
const to = currencies.find(c => c.currency === target);
if (!from || !to) return 0;
return amount \* (to.value / from.value);
}, \[amount, start, target\]); //
const resultFinal = \`${result.toFixed(2)} ${target}\`;
return (
<div>
<h1>Currency Converter</h1>
<label>
{start} to {target} Conversion
<input
type='number'
value={amount}
onChange={(e) => setAmount(Number(e.target.value))}
/>
</label>
<label>
Start Currency:
<select value={start} onChange={(e) => setStart(e.target.value)}>
{currencies.map((cur) => (
<option key={cur.currency} value={cur.currency}>{cur.currency}</option>
))}
</select>
</label>
<label>
Target Currency:
<select value={target} onChange={(e) => setTarget(e.target.value)}>
{currencies.map((cur) => (
<option key={cur.currency} value={cur.currency}>{cur.currency}</option>
))}
</select>
</label>
<h3 className='result'>
Converted Amount: {resultFinal}
</h3>
</div>
);
}