how to immediately render component after making changes in database-CodePudding

I have created a page where user will see some products. every products has a delivered button. if user click on delivered button the products quantity will decrease by 1. then it will immediately render the component and show new quantity

CodePudding user response：

I'm using a state to set products. Let's say there is a quantity and distructuring quantity

const [product, setProduct] = useState({});
const { quantity} = product;

I'm setting up a function that decrease that quantity by one

function removeOne() {
        let newQuantity = quantity - 1;
        const newProduct = { ...product, quantity: newQuantity }
        //copy all previous data if exist in product and setup new quantity 
        setProduct(newProduct);
        fetch(`your server link/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(newProduct)
        })
    }

<button onClick={() => removeOne(id)}}>Button</button>