Estoy haciendo una aplicación en donde se muestra al usuario unos productos y se le da una cantidad de monedas para intercambiar por productos.
siempre que se intercambia un producto se actualiza la cantidad de monedas y se guardan en el local estorage.
en la variable let actualCoins traigo la cantidad de monedas del local storage 2000 digamos, El usuario puede recargar mas monedas haciendo click en los botones de abajo, (1000, 5000, 7500) dicha cifra se guarda en el estado rechargedCoins.
Necesito actualizar la variable actualCoins para que guarde la cantidad de monedas que tiene mas las que el usuario ha recargado al hacer click en los botones.
digamos vienen 2000 monedas en la variable actualCoins, el usuario hace click en button de 1000 y tendría 3000 monedas, posteriormente hace click en 5000, tendria 8000 monedas en total y así...
Como puedo hacer para que la variable actualCoins vaya guardando el acumulado?
yo hice actualCoins = actualCoins + rechargedCoins;
Pero siempre me suma 2000 al valor que trae el button en el estado rechargedCoins y no sobre la suma acumulada. no acumula nada
Como podría hacer para que se guarde el acumulado en la variable.
Gracias por la ayuda.
function Recharge() {
let actualCoins = JSON.parse(localStorage.getItem('actualCoins'));
let [rechargedCoins, setRechargedCoins] = useState(0);
let [updatedCoinsFigure, setUpdateCoinsFigure] = useState(0);
const rechargeCoins = (e) => {
setRechargedCoins(Number(e.target.value));
}
//siempre me suma 2000
actualCoins = actualCoins + rechargedCoins;
return (
<RechargeSection className="container">
<h1 className="mb-5">Recarga monedas aquí</h1>
{
rechargedCoins && <h2 className="mb-4">Has recargado {rechargedCoins} en total tienes {Number(actualCoins)+rechargedCoins} </h2>
}
<button onClick={rechargeCoins} className="d-block mb-3 pt-3 pb-3" value="1000">1000<FontAwesomeIcon className="ml-5" icon={faCoins} /></button>
<button onClick={rechargeCoins} className="d-block mb-3 pt-3 pb-3" value="5000">5000<FontAwesomeIcon className="ml-5" icon={faCoins} /></button>
<button onClick={rechargeCoins} className="d-block mb-3 pt-3 pb-3" value="7500">7500<FontAwesomeIcon className="ml-5" icon={faCoins} /></button>
</RechargeSection>
)
}
export default Recharge;