I want to change the image I am using whenever the product is added to cart

February 15, 2022

I am using this right now, need to add a condition in such a way that whenever the getCartCount is 0 it should show image as bag_empty instead of bag and when the cart count is more than 0 it should show bag

<Badge count={getCartCount()}>
              <img
                className="bag__img"
                src={bag}
                alt=""
                onClick={user ? handleOpenBag : handleDynamicLink}
                onMouseOver={() => setbag(hoverbag)}
                onMouseOut={() => setbag(cart)}
              />
</Badge>

>Solution :

You could use a ternary operator like below, assuming that you have your empty bag image in your public folder.

<Badge count={getCartCount()}>
    <img
      className="bag__img"
      src={getCartCount()>0 ? bag : "/emty-bag-goes-here.png"}
      alt=""
      onClick={user ? handleOpenBag : handleDynamicLink}
      onMouseOver={() => setbag(hoverbag)}
      onMouseOut={() => setbag(cart)}
    />
</Badge>