Question 118069 in Mongodb Question posted in
The official documentation can be found here.

Mongodb – How can I update quantity of the product in UI, immediately at the time of updating the database?

const [product, setProduct] = useState({});
useEffect(() => {
    const url = `http://localhost:5000/product/${id}`;
    fetch(url)
        .then(res => res.json())
        .then(data => setProduct(data))
}, [id]);

const handleDeliveredBtn = id => {
    const newQuantity = parseInt(quantity) - 1;
    const updatedQuantity = { newQuantity };

    const url = `http://localhost:5000/product/${id}`;
    fetch(url, {
        method: 'PUT',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(updatedQuantity)
    })
        .then(res => res.json())
        .then(data => {
            toast('Product delivered successfully.');
        })
};

I want to show the updatedQuantity in my UI. Quantity is updated at database. But, without reloading the page, I can’t see any changes that happen in my UI.

Tags:

2

Answers


  1. 0

    You need to use setProduct to cause a render. React components only render whenever there is a change in the state or props, which in your case is invoked by the setProduct.

    const [product, setProduct] = useState({});
useEffect(() => {
    const url = `http://localhost:5000/product/${id}`;
    fetch(url)
        .then(res => res.json())
        .then(data => setProduct(data))
}, [id]);

const handleDeliveredBtn = id => {
    const newQuantity = parseInt(quantity) - 1;
    const updatedQuantity = { newQuantity };

    const url = `http://localhost:5000/product/${id}`;
    fetch(url, {
        method: 'PUT',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(updatedQuantity)
    })
        .then(res => res.json())
        .then(data => {
            toast('Product delivered successfully.');
            setProduct(data) // add setProduct
        })
};

    You might want to make a shallow copy instead for performance / unnessecary renders but for the sake of example I just added setProduct(data).

    Login or Signup to reply.
  2. 0

    You need one more useState hook to display updated value in your UI. checkout below code:

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

useEffect(() => {
    const url = `http://localhost:5000/product/${id}`;
    fetch(url)
        .then(res => res.json())
        .then(data => setProduct(data))
}, [id]);

const handleDeliveredBtn = id => {
    const newQuantity = parseInt(quantity) - 1;
    setUpdatedQuantity(newQuantity);

    const url = `http://localhost:5000/product/${id}`;
    fetch(url, {
        method: 'PUT',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(updatedQuantity)
    })
        .then(res => res.json())
        .then(data => {
            toast('Product delivered successfully.');
        })
};

    now you can use updatedQuantity as a current data in your UI.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search