Customers are selecting restaurant items that have options like toppings. I'm using checkboxes to allow the customer to select what options, with each checkbox having the added price of the option inside of the HTML value attribute.
There is also a quantity component that uses a callback to modify a React state.
(example of checkboxes, and quantity selection)
The code I've come up with to handle all of this is as follows:
const [basePrice, setBasePrice] = useState(0);
const [price, setPrice] = useState(0);
useEffect(() => {
let insert = parseFloat(props.item.price);
setBasePrice(insert.toFixed(2));
setPrice(insert.toFixed(2));
setQuant(1);
}, [props.item])
useEffect(() => {
calcPrice();
}, [quant])
const calcPrice = () => {
let checked = document.querySelectorAll('input:checked');
let insert = parseFloat(basePrice);
for (let i of checked) {
insert += parseFloat(i.value);
}
insert *= parseFloat(quant);
setPrice(insert.toFixed(2));
}
calcPrice() is also called within the onchange attribute of the div containing all of the checkboxes. Anytime a customer clicks on a checkbox, it calls calcPrice().
the first useEffect() just resets the display price (setPrice(insert.toFixed(2)) and runs every time the user selects a different item.
The problem I'm having is that whenever the customer selects an option, increases the quantity, and then switches to a new item, it doesn't display the right price. It calls the second useEffect() before let checked = document.querySelectorAll() has a chance to run, and uses the boxes checked from the last item.
price has the $3 from last item
I have spent a full week and a half trying to combine the quantity and checkboxes properly, and--knowing that I am more than likely too stupid to see the obvious solution--am asking for help on this.
Eventually, I decided on adding another state variable "first" that I use to determine whether or not the quantity changed due to the customer clicking on another item, preventing the second useEffect() from running before let checked = document.querySelectorAll('input:checked') had the chance to.
I do not like this solution at all. It works, I'm glad, but it feels hacked together. Here's the code:
const ItemModal = (props) => {
const [quant, setQuant] = useState(1);
const [basePrice, setBasePrice] = useState(0);
const [price, setPrice] = useState(0);
const [first, setFirst] = useState(false);
useEffect(() => {
let insert = parseFloat(props.item.price);
setBasePrice(insert.toFixed(2));
setPrice(insert.toFixed(2));
setQuant(1);
setFirst(true);
}, [props.item])
if (!first || quant > 1) {
calcPrice();
} if (first) {
setFirst(false);
}
}, [quant])
const calcPrice = () => {
let checked = document.querySelectorAll('input:checked');
let insert = parseFloat(basePrice);
for (let i of checked) {
insert += parseFloat(i.value);
}
insert *= parseFloat(quant);
setPrice(insert.toFixed(2));
}
The line || quant > 1 is necessary in the if statement within the second useEffect() because, otherwise, the quantity button will not work properly when a new item is selected. The customer has to press the quantity button at least twice before it begins to work since first is set to false on the first click.