CODEWITHSUNDEEP
javascriptreactjsnext.jscart
Undefined
Undefined

Reputation: 1021

Update count in each item (Snippet Attached)

I am trying to make a shopping cart app like this site but using reactjs.

I have almost achieved the UI but regarding functionality, I am facing an issue.

index.js: (Sending each product to product component)

        {products.length > 0
          ? products.map((product) => (
              <Product key={product.id} product={product} />
            ))
          : ""}

components/product.js:

<div>
    {product?.price}
   <h3>
      {product.name ? product.name : ""}
   </h3>
   <div dangerouslySetInnerHTML={{ __html: product?.description }} />
</div>

Also I have the ADD button UI switch code and that will look like,

Before clicking add button,

------------
| ADD     +|
------------

After clicking add button,

-----------------
| -  {count}   +|
-----------------

Things are working fine upto this with related to UI, but the issue is in updating count on each product.

I am getting the count from contextApi and it looks like,

const contextData = useContext(AppContext);

const productsCount = contextData.cart;

This count gets updated every time we click the add button. (This is fine when we click on single product).

Issue:

If I click the add button in first product and then if I click the add in second button then the result is like the below for both the products.

------------
| -  2   + |
------------

Expectation:

But the count needs to be updated on each product respectively.

-> If I click the add button on product one once, then the count needs to be 1 in product one.

------------
| -  1   + |
------------

-> If I click the add button on product two thrice, then the count needs to be 3 in product two.

------------
| -  3   + |
------------

Edit Using Tailwind with Next.js (forked)

Upvotes: 0

Views: 120

Answers (1)

Ahmed Jafri
Ahmed Jafri

Reputation: 49

The problem is that you are using useContext() for storing the count. The value of the context is same for all the components that is why when you click the add button, your context value changes and because it is same for all components, your other components reflect the updated value as well. I would recommend you using useState() for each item component so they don't effect the count value for other items.

EDIT I am unable to add a comment because i don't have the required points for it. I saw your code and you can do the following in your Product.js file:

  1. Forget about the context provider.

  2. Add useState() in your Product component like: const [count, setCount] = useState();

  3. Make 2 functions (addFromCart & removeFromCart) which would be called on onClick for the button which had to add and item or remove an item from the cart

  4. For addToCart you can do something like this:

    const addToCart = () => setCount(prev => prev+1);

  5. For removeFromCart do this:
    const removeFromCart = () => { setCount(prev => prev-1) } //make sure that your count is not below 0 by using an if-statement

This way, when you press add for a product, it wont affect other products because each product has its own state :)

Upvotes: 1

Related Questions