estoy intentando pasar un viejo componente que solía tener escrito en vanillaJS a react para agregar a un nuevo proyecto, el mismo en si es muy sencillo.
Consiente dos input
uno de tipo range
y otro de tipo checkbox
y dos h1
que van cambiando dependiendo de los eventos que suceden en los input.
Por ejemplo cuando muevo el input
de tipo range
, este dispara una función que cambia el valor de los dos h1
, a su tiempo se fija si el input
de tipo checkbox
esta checked
, en caso que sea true
se le resta un 25% al valor del h1
en caso contrario sigue todo igual.
El problema esta en que una vez que hago click sobre el checkbox
este si realiza el descuento sobre el valor del price
pero el valor de price
vuelve a su estado inicial y la barra del range
vuelve al 50.
me surgen varias maneras de solucionar esto, podría ser usando un el useEffect
?
Aqui pueden ver en funcionamiento el codigo : Sandbox
Este seria el código del componente:
export default function App() {
const [value, setValue] = useState(0);
const [price, setPrice] = useState(8);
const [plan, setPlan] = useState("10k");
const [toggle, setToggle] = useState(false);
const handleDiscount = () => {
setToggle((toggle) => !toggle);
};
const handlePriceChange = (e) => {
const valueChange = e.target.value;
setValue(valueChange);
let pricing = 8;
if ((value > 0) & (value <= 20)) {
setPlan("10k");
pricing = 8;
} else if (value > 20 && value <= 40) {
setPlan("50k");
pricing = 12;
} else if (value > 40 && value <= 60) {
setPlan("100k");
pricing = 16;
} else if (value > 60 && value <= 80) {
setPlan("500k");
pricing = 24;
} else if (value > 80 && value <= 100) {
setPlan("1M");
pricing = 36;
}
if (toggle === true) {
setPrice(pricing - pricing * 0.25);
} else {
setPrice(pricing);
}
};
return (
<div className="App">
<input
type="range"
name="range"
value={value}
min="0"
max="100"
className="slider"
id="range"
onChange={handlePriceChange}
/>
<input
type="checkbox"
name="discount"
className="discount"
id="discount"
onClick={handleDiscount}
onChange={handlePriceChange}
/>
<> {price} </>
<hr />
<> {plan} Pageviews </>
</div>
);
}
Y este es el código original en vanillaJS:
const range = document.getElementById('range');
const pageviewsCount = document.getElementById('pageviews-count');
const toggleDiscount = document.getElementById('toggle_discount');
const price = document.getElementById('price');
function handlePricingChanges(value) {
let pricing = 8;
if ((value > 0) & (value <= 20)) {
pageviewsCount.textContent = '10K Pageviews';
pricing = 8;
} else if (value > 20 && value <= 40) {
pageviewsCount.textContent = '50K Pageviews';
pricing = 12;
} else if (value > 40 && value <= 60) {
pageviewsCount.textContent = '100K Pageviews';
pricing = 16;
} else if (value > 60 && value <= 80) {
pageviewsCount.textContent = '500K Pageviews';
pricing = 24;
} else if (value > 80 && value <= 100) {
pageviewsCount.textContent = '1M Pageviews';
pricing = 36;
}
if (toggleDiscount.checked) {
const totalValue = pricing - pricing * 0.25;
price.textContent = `$${totalValue}.00`;
} else {
price.textContent = `$${pricing}.00`;
}
}
range.addEventListener('input', function (event) {
console.log('range value :>> ', event.target.value);
const value = range.value;
handlePricingChanges(value);
});
toggleDiscount.addEventListener('input', function (event) {
console.log('range value :>> ', event.target.value);
const value = range.value;
handlePricingChanges(val