I am currently working with a Ticket child class where I set the total amount after changing the number of tickets. The issue I am encountering is that the setNumber function doesn't seem to work properly unless the setTotal function is commented out. I'm struggling to understand this behavior and would appreciate any help in resolving this problem.
const Booking = () => {
let [total, setTotal] = useState(0)
const Ticket = ({ ticket, index }) => {
let [number, setNumber] = useState(0);
const handleChange = (e) => {
const order = {
eventid: eventid,
amt: ticket.price * e.target.value,
type: ticket.type,
tickets: e.target.value,
email: userdata.email,
ticketid: ticket.ticketid,
}
orders[index] = order
//setNumber doesn't seem to work unless setTotal is commented out
setNumber(Number(e.target.value))
console.log(number)
let sum = orders.reduce((accumulator, object) => {
return accumulator + object.amt;
}, 0)
setTotal(sum)
}
return (
<div className="p-5 space-y-5 grid grid-cols-6">
<select name="number" onChange={handleChange} value={number}>
<option value={0}>0</option>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
<option value={5}>5</option>
<option value={6}>6</option>
<option value={7}>7</option>
<option value={8}>8</option>
<option value={9}>9</option>
<option value={10}>10</option>
</select>
</div>
)
}
I've attempted to pass the setTotal function as a parameter to the child component but it hasn't resolved the issue