Why is my input field not allowing me to edit the content? - html

Question

I cannot change the value of this input field in the browser.
<div>
cart.products.map((item) => (
<div className="" key={item.product._id}>
<div
className={`${styles.quantity} col-6 d-flex justify-content-around align-items-center col-md-2
d-md-block mb-2 mb-md-0`}>
<input
className="form-control-sm text-center mb-2"
type="number"
name="quantity"
value={item.quantity}
onChange={(event) => handleChange(event.target)}
/>
</div>
</div>
)
</div>;
The cart data looks like this and is being pulled from redux;
{
"_id": {
"$oid": "5f15ee2c0b94bf240470d70d"
},
"user": {
"$oid": "5f15ee2c0b94bf240470d70c"
},
"products": [
{
"quantity": 2,
"_id": {
"$oid": "5f47d8f2a0c7f4238cb82bf6"
},
"product": {
"$oid": "5f1864917c213e0f5779ee48"
}
},
}
handleChange:
const handleChange = (event.target) => {
const { name, value } = event.target;
setQuantity(value);
};
Make a deep copy of the cart from the reducer thereby giving the component its own copy of the cart;
useEffect(() => {
getCart(cartIn);
}, [cartIn]);
const [cart, setCart] = useState({});
const getCart = (cart) => {
setCart(JSON.parse(JSON.stringify(cart)));
};
Reducer code:
export const CartReducer = (state = initialState, { type, payload }) => {
switch (type) {
case ReducerTypes.SET_CART:
console.log("cart", payload);
const subtotal = computeSubtotal(payload);
addCartToLocalStorage(payload, subtotal);
return {
...state,
cart: payload,
subtotal: subtotal,
numberOfItems: payload.products.length,
};
}
};
Destructuring example using event.target:
const handleChange = (event) => {
const { name, value } = event.target;
setUserData((prevState) => ({ ...prevState, [name]: value }));
};