How to update a state using nextjs?

Question

I have been working on a next.js project, and I have a part that acts as a shopping cart. When you click on an item, it adds the item image to a list and renders all the selected items. To remove the item, you can click on the small icon. When the small icon is clicked, I splice that list and update the prop, but it doesn't update until adding another item. I have seen this question, but when I implement it, it gives an error. I have also read this article, but it also doesn't like that. I have also posted my project on code on code sandbox here.

var cartImages = [];
export default function Home({ data }) {
    const removeitem = (index) => {
        cartImages.splice(index, 1);
        setCartImg(cartImages);
    };
    const [cartImg, setCartImg] = useState(cartImages);
    return (
    <Popup onClick={removeitem} />);
}

Thanks for you're time!

Please include the necessary code *within* the question itself. Offsite support is fine, but the main code should be here. — Brian Thompson, Sep 20 '21 at 20:47
However, [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) mutates the original array, meaning you're mutating state. This is why you do not see the re-render. — Brian Thompson, Sep 20 '21 at 20:48
Is there any particular usecase, for which you're using the `cartImages` variable outside the function component to manage the image urls? — Junaid Faryad, Sep 20 '21 at 21:02
I think that what you said pointed me in the right direction, but I think I am experiencing an issue with next, when I insert this.removeitem on the click event, it says that `cannot read property of removeitem` when I remove the const part it says `removeitem is undefined` — Travis C, Sep 20 '21 at 21:12
@JunaidFaryad I use `cartimages` outside the `removeitem` function to also display the info — Travis C, Sep 20 '21 at 21:15

score 1 · Accepted Answer · edited Sep 21 '21 at 09:47

You codesandbox is updated. Please review. I've commented some of the code. Basically, there were two issues.

Total was not updating on the item removal, because the total was not being updated after item removal.
CartImg state was not being reflecting the change on removal.

to solve the first issue, I updated the removeItem function to use and update the state variable cartImg.

const removeitem = (index) => {
  console.log(index);
  const updated = cartImg.filter((item, idx) => idx !== index); // remove the item based on the index property
  if (!updated.length) setPopup(false);
  setCartImg(updated);
};

also updated the total prop in the Popup component

total={cartImg.reduce((partial_sum, a) => partial_sum + a.price, 0)}

To solve both issues, I updated the cartImg state to store the url and price of a item in the object. Than sum the total of the items in the cartImg array.

How to update a state using nextjs?

1 Answers1