title: How to update total price of products on React functional components?
body: <p>I'm creating a e-commerce website. But i'm unable to update the total price using the useState hook of react.</p>
  <p>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.</p>
  <blockquote>
  <p>codes:</p>
  </blockquote>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = () =&gt; {
    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 = () =&gt; {
      setQuantity(quantity + 1);
    };
    const handleRemoveQuantity = () =&gt; {
      if (quantity === 0) {
        return;
      } else {
        setQuantity(quantity - 1);
      }
    };
  
    const handleDelete = (id) =&gt; {
      fetch(`https://limitless-crag-38673.herokuapp.com/cart?id=${id}`, {
        method: "DELETE",
      })
        .then((res) =&gt; res.json())
        .then((data) =&gt; {
          data.deletedCount &gt; 0 &amp;&amp; setIsDeleted(true);
          alert("successfully deleted");
        });
    };
    useEffect(() =&gt; {
      setIsDeleted(false);
      fetch(
        `https://limitless-crag-38673.herokuapp.com/cart/product?email=${user.email}`
      )
        .then((res) =&gt; res.json())
        .then((data) =&gt; setProducts(data));
    }, [isDeleted]);
    return (
      &lt;&gt;
        {/* main cart */}
        &lt;Container sx={{ my: 3 }} maxWidth="xl"&gt;
          &lt;Grid container spacing={{ xs: 1, md: 2 }}&gt;
            {/* products */}
            &lt;Grid item md={8} xs={12}&gt;
              {/* cart title */}
              &lt;Grid
                container
                sx={{
                  borderBottom: "1px solid gray",
                  display: { xs: "none", sm: "flex" },
                }}
              &gt;
                &lt;Grid item md={6}&gt;
                  &lt;Typography variant="h5"&gt;Product&lt;/Typography&gt;
                &lt;/Grid&gt;
                &lt;Grid item md={4}&gt;
                  &lt;Typography variant="h5" sx={{ textAlign: "center" }}&gt;
                    Price
                  &lt;/Typography&gt;
                &lt;/Grid&gt;
                {/* &lt;Grid item md={2}&gt;
                  &lt;Typography variant="h5" sx={{ textAlign: "center" }}&gt;
                    Quantity
                  &lt;/Typography&gt;
                &lt;/Grid&gt;
                &lt;Grid item md={2}&gt;
                  &lt;Typography variant="h5" sx={{ textAlign: "center" }}&gt;
                    Subtotal
                  &lt;/Typography&gt;
                &lt;/Grid&gt; */}
                &lt;Grid item md={2}&gt;
                  &lt;Typography variant="h5" sx={{ textAlign: "center" }}&gt;
                    Cancel
                  &lt;/Typography&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
              {/*============
             product
             ============= */}
  
              {products.map((product) =&gt; (
                &lt;CartProduct
                  key={product._id}
                  product={product}
                  handleDelete={handleDelete}
                  total={total}
                  setTotal={setTotal}
                /&gt;
              ))}
            &lt;/Grid&gt;
  
            {/*=========== 
            cart
            ================ */}
            &lt;Cart /&gt;
          &lt;/Grid&gt;
        &lt;/Container&gt;
      &lt;/&gt;
    );
  };
  
  export default CartContainer;</code></pre>
  </div>
  </div>
  </p>
  <p>`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.</p>
  <blockquote>
  <p>codes:</p>
  </blockquote>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 }) =&gt; {
    const { name, price, src } = product;
    setTotal(total + price);
  
    return (
      &lt;Grid
        container
        sx={{
          borderBottom: "1px solid gray",
          display: "flex",
          flexDirection: { xs: "column", md: "row" },
          alignItems: "center",
        }}
        spacing={{ md: 2, xs: 1 }}
      &gt;
        {/* product */}
        &lt;Grid
          sx={{
            display: "flex",
            alignItems: "center",
            flexDirection: { md: "row", xs: "column" },
          }}
          item
          md={6}
          xs={12}
        &gt;
          &lt;Box&gt;
            &lt;img src={src} alt="" /&gt;
          &lt;/Box&gt;
          &lt;Typography sx={{ ml: 1 }} variant="h6"&gt;
            {name}
          &lt;/Typography&gt;
        &lt;/Grid&gt;
        {/* Price */}
        &lt;Grid
          item
          md={4}
          sx={{
            alignItems: "center",
            justifyContent: "center",
            display: "flex",
          }}
        &gt;
          &lt;Typography variant="h5"&gt;$ {price}&lt;/Typography&gt;
        &lt;/Grid&gt;
        {/* 
                  //  quantity
                  &lt;Grid
                    sx={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "flex-start",
                    }}
                    item
                    md={2}
                    xs={12}
                  &gt;
                    &lt;IconButton onClick={handleRemoveQuantity}&gt;
                      &lt;RemoveCircleOutlineOutlinedIcon /&gt;
                    &lt;/IconButton&gt;
                    &lt;TextField value={quantity} /&gt;
                    &lt;IconButton onClick={handleAddQuantity}&gt;
                      &lt;AddCircleOutlineOutlinedIcon /&gt;
                    &lt;/IconButton&gt;
                  &lt;/Grid&gt;
                  // Subtotal
                  &lt;Grid
                    item
                    md={2}
                    xs={12}
                    sx={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                    }}
                  &gt;
                    &lt;Typography variant="h5"&gt;$ {product.price}&lt;/Typography&gt;
                  &lt;/Grid&gt; */}
        {/* Cancel */}
  
        &lt;Grid
          item
          md={2}
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        &gt;
          &lt;IconButton onClick={() =&gt; handleDelete(product._id)}&gt;
            &lt;CancelOutlinedIcon fontSize="large" /&gt;
          &lt;/IconButton&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  };
  
  export default CartProduct;</code></pre>
  </div>
  </div>
  </p>