const ProductEdit = () => {
const[user]=useAuthState(auth);
const {inventoryId}=useParams();
const [product,SetProduct]=useState({});
useEffect(()=>{
const url=`http://localhost:5000/product/${inventoryId}`;
fetch(url)
.then(res=>res.json())
.then(data=>SetProduct(data));
},[])
return (
<div className='mt-5 '>
<h3 className='text-center'> Product Detail of {product.name}</h3>
<form className='w-50 mx-auto'>
<input className='w-100 mb-2' type="text" placeholder='Name' name='name' value={product.name} required/>
<br />
<input className='w-100 mb-2' type="text" placeholder='Price' name='quantity' value={product.price} required/>
<br />
<input className='w-100 mb-2' type="text" placeholder='Quantity' name='number' value={product.quantity} required/>
<br />
<input onclick={handleReduce} type="submit" value="Delivered" />
</form>
I want to reduce the amount of the quantity from the data which is loaded also in MongoDB. what should do?
I see what you are trying to do.
You can do this in a couple of ways.
1st method is that you reduce the quantity from the server side by just sending -1 in the body.
2nd method is that you do your calculation from the client-side and send the updated quantity to the server-side.
In any case, you can do this with a function.
I see that you are calling a function on the onClick event.
So, why not use that?
All you have to do is wrap that onClick function as a callback function.
Just like this:
<input onclick={()=>handleReduce(-1)} type="submit" value="Delivered" />
See? I just pass -1 as the function parameter.
And you can declare the function like this:
const handleQuantity = (number) => {
axios.patch(
`http://localhost:5000/items/${id}`,
{
quantity: item.quantity + number,
},
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
const newItem = { ...item, quantity: item.quantity + number };
setItem(newItem);
};