im new to React JS and i found a problem while updating my object using setState
const [quantity, setQuantity] = useState(0);
const [product, setProduct] = useState<Product>(products[0]);
const [transactionDetail, setTransactionDetail] = useState<TransactionDetails>({
product,
id: 0,
price: 0,
quantity: 0,
})
const addProduct = () => {
let price = (product.price * quantity);
setTransactionDetail({...transactionDetail,quantity: quantity, product:product, price: price });
console.log(transactionDetail);
};i must call addProduct function twice to update the object, I've read some answers, but I still don't understand how to use useEffect and callbacks, can anybody help me?
//use a useEffect hooks to automatically watchout for change and set it back to the new updated state
const [quantity, setQuantity] = useState(0);
const [product, setProduct] = useState<Product>(products[0]);
const [transactionDetail, setTransactionDetail] = useState<TransactionDetails>({
product,
id: 0,
price: 0,
quantity: 0,
})
const addProduct = () => {
let price = (product.price * quantity);
setTransactionDetail({...transactionDetail,quantity: quantity, product:product, price: price });
console.log(transactionDetail);
};
useEffect(() => {setTransactionDetail(transactionDetail)}, [transactionDetail])