I wanted to pass the total amount from the Cart.js to the App.js then to the info.js. Since I have this amount to calculate all of the cart items and then a discount field which will then result to totalAmount

What I did was do it all in the App.js

 const amount = cartItems.reduce(
    (price, item) => price   item.quantity * item.price,
    0
  );
  const [discount, setDiscount] = useState(0);
  let totalAmount = Number(amount) - (Number(amount) * Number(discount)) / 100;
  console.log(totalAmount, "tota amt from the App.js");

And then pass the total amount to cart items and the info.js

For the cart.js, total amount will vary from here because it will also calculate the discount if ever the user has entered a value for the discount. I am unsure if I am doing this correctly where I also pass the setDiscount here as props in the Cart.js

codesandbox: https://codesandbox.io/s/add-to-cart-sampled-2-with-material-ui-table-pagination-with-reduced-cart-items-firebase-5id6gs?file=/src/Cart.js:7359-7876

const Cart = ({
  cartItems,
  handleCartClearance,
  handleRemove,
  handleAdd,
  amount,
  totalAmount,
  discount,
  setDiscount
}) => {

For displaying it:

  <div>
      <b>Total Amount :{amount}</b>
      <br />
      <label>Discount in percentage</label>
      <input
        type="number"
        placeholder="Discount"
        value={discount}
        onChange={(e) => setDiscount(e.target.value)}
      />
      <br />
      <b>
        Total amount but in string:{" "}
        {totalAmount.toLocaleString(navigator.language, {
          minimumFractionDigits: 2
        })}
      </b>
    </div>

CodePudding user response：

I don’t see any problem with the logic and it should work fine, but I would personally use Redux to do that.