How to update total price of products on React functional components?

Question

I'm creating a e-commerce website. But i'm unable to update the total price using the useState hook of react.

When is use forEach to update total price it give me this error: Uncaught (in promise) Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

codes:

import { Container, Grid, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import useAuth from "../../../hooks/useAuth";
import Cart from "../Cart/Cart";
import CartProduct from "../CartProduct/CartProduct";

const CartContainer = () => {
  const { user } = useAuth();
  // useNavigate hook
  const navigate = useNavigate();
  /* states */
  const [products, setProducts] = useState([]);
  const [quantity, setQuantity] = useState(0);
  const [isDeleted, setIsDeleted] = useState(false);
  const [total, setTotal] = useState(0);

  const handleAddQuantity = () => {
    setQuantity(quantity + 1);
  };
  const handleRemoveQuantity = () => {
    if (quantity === 0) {
      return;
    } else {
      setQuantity(quantity - 1);
    }
  };

  const handleDelete = (id) => {
    fetch(`https://limitless-crag-38673.herokuapp.com/cart?id=${id}`, {
      method: "DELETE",
    })
      .then((res) => res.json())
      .then((data) => {
        data.deletedCount > 0 && setIsDeleted(true);
        alert("successfully deleted");
      });
  };
  useEffect(() => {
    setIsDeleted(false);
    fetch(
      `https://limitless-crag-38673.herokuapp.com/cart/product?email=${user.email}`
    )
      .then((res) => res.json())
      .then((data) => setProducts(data));
  }, [isDeleted]);
  return (
    <>
      {/* main cart */}
      
        
          {/* products */}
          
            {/* cart title */}
            
              
                Product
              
              
                
                  Price
                
              
              {/* 
                
                  Quantity
                
              
              
                
                  Subtotal
                
               */}
              
                
                  Cancel
                
              
            
            {/*============
           product
           ============= */}

            {products.map((product) => (
              
            ))}
          

          {/*=========== 
          cart
          ================ */}
          
        
      
    
  );
};

export default CartContainer;

`And when I try this it gives me this error: Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

codes:

import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
import { Grid, IconButton, Typography } from "@mui/material";
import { Box } from "@mui/system";
import React from "react";

const CartProduct = ({ product, handleDelete, setTotal, total }) => {
  const { name, price, src } = product;
  setTotal(total + price);

  return (
    
      {/* product */}
      
        
          
        
        
          {name}
        
      
      {/* Price */}
      
        $ {price}
      
      {/* 
                //  quantity
                
                  
                    
                  
                  
                  
                    
                  
                
                // Subtotal
                
                  $ {product.price}
                 */}
      {/* Cancel */}

      
         handleDelete(product._id)}>
          
        
      
    
  );
};

export default CartProduct;

user_16116506 · Answer

Why not calculate Total in parent component? because setState automatically triggers re-render and in your case every rerender you trigger another setState.

if you want to store data somewhere without re-render use useRef. But in your case i would suggest to set Total price in CartContainer

user_13889616 · Answer

You don't need total and subTotal, you can directly calculate it from product.

The below code need to be in CartProduct as you want to apply delete on individual items.

const [isDeleted, setIsDeleted] = useState(false);

   useEffect(() => {
    setIsDeleted(false);
    fetch(
      `https://limitless-crag-38673.herokuapp.com/cart/product?email=${user.email}`
    )
      .then((res) => res.json())
      .then((data) => setProducts(data));
  }, [isDeleted]);

How to update total price of products on React functional components?

2 Answers