How can I get total price of all product in cart in Reactjs

Question

I have code like this

const Cart = ({ fetchCartRequest, productsInCart }) => {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  useEffect(() => {
    const userId = localStorage.getItem("userData");
    fetchCartRequest(userId);
  }, [fetchCartRequest]);


  return (
    <>
      <Image src={CartIcon} alt="Cart icon" onClick={handleShow} />
      <Modal show={show} onHide={handleClose} size="md">
        <Modal.Header closeButton>
          <Modal.Title>Cart detail</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {!!productsInCart && productsInCart.length > 0 ? (
            productsInCart.map((item, index) => {
              return (
                <CartContainer
                  key={index}
                  image={item.image}
                  name={item.name}
                  price={parseInt(item.price) * item.quantity}
                  quantity={item.quantity}
                />
              );
            })
          ) : (
              <h4 className="center-title">Cart list is empty!</h4>
            )}
          <div>
            <h3>Total price: </h3>
          </div>
        </Modal.Body>
        <Modal.Footer className="d-flex justify-content-center">
          <Button btnText="Checkout" onClick={handleClose} />
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default Cart;

In my code above I already get the total price for each item, but I not get total price for all items in the Cart yet. I wonder that, how can I sum all price of the product in cart and show in UI

Answer 1

Simple sum all items use array reduce in js:

const Cart = ({ fetchCartRequest, productsInCart }) => {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    useEffect(() => {
        const userId = localStorage.getItem("userData");
        fetchCartRequest(userId);
    }, [fetchCartRequest]);


    return (
        <>
            <Image src={CartIcon} alt="Cart icon" onClick={handleShow} />
            <Modal show={show} onHide={handleClose} size="md">
                <Modal.Header closeButton>
                    <Modal.Title>Cart detail</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    {!!productsInCart && productsInCart.length > 0 ? (
                        productsInCart.map((item, index) => {
                            return (
                                <CartContainer
                                    key={index}
                                    image={item.image}
                                    name={item.name}
                                    price={parseInt(item.price) * item.quantity}
                                    quantity={item.quantity}
                                />
                            );
                        })
                    ) : (
                        <h4 className="center-title">Cart list is empty!</h4>
                    )}
                    <div>
                        <h3>Total price:
                            {!!productsInCart && productsInCart.length > 0 ? (
                                productsInCart.reduce((sum, item) => sum + parseInt(item.price) * item.quantity, 0)
                            ) : null}
                        </h3>
                    </div>
                </Modal.Body>
                <Modal.Footer className="d-flex justify-content-center">
                    <Button btnText="Checkout" onClick={handleClose} />
                </Modal.Footer>
            </Modal>
        </>
    );
};

Answer 2

Seems kind of evident given that you're already doing this per line, but here it is:

productsInCart.reduce((sum, item) => sum + parseInt(item.price) * item.quantity, 0)