am Unable to calculate the prices in the cart List-ReactJS

I am doing a cart page here, the cart page will display the items to the which user has been added and it will display its price also. On the same page, i want to display the Grand total amount of all the items present on the cart Page in Payment Summary(order summary) Please help me am new to React.

Here is my ReactJS code of Cart page

import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router';
import '../cart.css';

function Cart() {
  const tvalue = 0;
  const [cart, setCart] = useState([]);
  const [paymentsummery, setpaymentsummery] = useState(0);
  const [total, setTotal] = useState('');
  const [loading, setLoading] = useState(true);
  const [cartSate, setcartState] = useState(true);
  const [id, setID] = useState('');
  const history = useHistory();

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const responce = await fetch('/getcartItems', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        const resp = await responce.json();
        console.log(resp);
        setCart(resp);
        setLoading(false);
        setID(resp[0]._id);
        setcartState(true);

        if (!responce) {
          alert('user not authorized');
          history.push('/');
        } else if (responce.status == 400) {
          history.push('/');
        } else if (responce.status == 401) {
          alert('cart is empty');
        }
      } catch {
        // alert('cart is empty')
        setcartState(false);
      }
    };
    fetchUser();
  }, []);

  if (cartSate == true) {
    return (
      <div className="cart_cont row container-fluid">
        {loading ? (
          <div className="loading_div">
            <h1 className="loading">Loading...</h1>
          </div>
        ) : (
          cart.map((itms, index) => (
            <div key={index} className="innerCart my-0 col-8">
              <div className="cartDetails">
                <div className="slno  d-flex flex-column">
                  <label htmlFor="" className="text-danger m-auto">
                    Sl.No
                  </label>
                  <p className="m-auto">{index + 1}</p>
                </div>
                <div className="cartImage ">
                  <img
                    src={itms.productimage}
                    alt="cart_image"
                    height="100px"
                  />
                </div>
                <div className="title  d-flex flex-column">
                  <label htmlFor="" className="text-danger m-auto">
                    Item Name
                  </label>
                  <p className="m-auto">{itms.productname}</p>
                </div>
                <div className="qty d-flex flex-column">
                  <label htmlFor="" className="text-danger m-auto">
                    Quantity
                  </label>
                  <p className="m-auto">{itms.qty}</p>
                </div>
                <div className="tprice  d-flex flex-column">
                  <label htmlFor="" className="text-danger m-auto">
                    Price
                  </label>
                  <p className="m-auto">{itms.totalprice}</p>
                </div>
                <div className="d-flex ">
                  <i className="fas fa-trash m-auto" />
                </div>
              </div>
              <hr />
            </div>
          ))
        )}

        {loading ? (
          <div />
        ) : (
          <div className="priceDetails  col-4 ">
            <div className="innerPriceDetails rounded">
              <h1 className="paymentSummery h3 p-2">Payment Summery </h1>
              <div className=" d-flex justify-content-between mx-2 my-2">
                <span>Transaction code</span>
                <span>Vd7jl0rq9ppe</span>
              </div>
              <div className="coupen d-flex m-3 justify-content-between">
                <input
                  type="text"
                  className="form-control mr-2"
                  placeholder="COUPON CODE"
                />
                <button className="btn btn-info  px-5">Apply</button>
              </div>
              <hr />
              <div className="order_summery m-3">
                <div className="d-flex justify-content-between">
                  <h5>Order Summery</h5>
                  <h5>Rs. </h5>
                </div>
                <div className="d-flex justify-content-between">
                  <h5>Shipping charges</h5>
                  <h5>Rs. 10</h5>
                </div>
                <div className="d-flex justify-content-between">
                  <h5>Additional services</h5>
                  <h5>Rs. 00</h5>
                </div>
                <div className="d-flex justify-content-between">
                  <h5 className="font-weight-bold">Total amount</h5>
                  <h5 className="font-weight-bold">Rs. 5400</h5>
                </div>

                <hr />
                <p className="d-flex bg-danger expires text-white p-2 rounded justify-content-between">
                  Sale Expires in: 21Hours, 31 Minutes
                </p>
              </div>
            </div>
            <button className="btn btn-warning w-100 my-3 font-weight-bold p-2">
              CHECKOUT
            </button>
          </div>
        )}
      </div>
    );
  }
  return (
    <div>
      <h1 className="display-3 mt-5">CART IS EMPTY!</h1>
    </div>
  );
}

export default Cart;

above, I have shared my whole code of the cart page, Usually, the cart data will be displayed from the database. Please help me.

Answer

For that, you would use Array.reduce to calculate for grandTotal:

Before your return function:

const grandTotal = cart.reduce((a, c) => a + c.totalprice, 0);

Then you can place grandTotal where ever you want to display it.