I have a provider like this:
import {createContext, useContext, useState} from 'react'
// Create Context object.
const CartContext = createContext({
deliveryPersion:'own',//or other
coupon:{},
updateCoupon: (obj) => {},
updateDeliveryPersion: (type) => {},
})
// Export Provider.
export function CartProvider(props) {
const updateCoupon = (_coupon) => {
setState({...state,coupon: _coupon})
}
const updateDeliveryPersion = (type) => {
setState({...state,deliveryPersion: type})
}
const initState = {
deliveryPersion:'own',
coupon:{},
updateCoupon:updateCoupon,
updateDeliveryPersion:updateDeliveryPersion
}
const [state, setState] = useState(initState)
return (
<CartContext.Provider value={state}>
{props.children}
</CartContext.Provider>
)
}
// Export useContext Hook.
export function useCartContext() {
return useContext(CartContext);
}
My senario:
I have two components. component1 and component1.
inside component1 I updated the deliveryPersion variable like this:
...
cartContext.updateDeliveryPersion('other')
inside component2 I updated coupon object:
const data = {/**/}
cartContext.updateCoupon(data)
at this here deliveryPersion changed to default value.(own value).
in other word, I missing current value with using update function.
where is my problem?
for example first component:
const cartContext = useCartContext()
cartContext.updateDeliveryPersion(type)