Quería pasar la cantidad total de Cart.js a App.js y luego a info.js. Como tengo esta cantidad para calcular todos los artículos del carrito y luego un campo de descuento que resultará en totalAmount
Lo que hice fue hacerlo todo en 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");
Y luego pase la cantidad total a los artículos del carrito y al info.js
Para cart.js, el monto total variará desde aquí porque también calculará el descuento si alguna vez el usuario ingresó un valor para el descuento. No estoy seguro si estoy haciendo esto correctamente donde también paso el setDiscount
aquí como accesorios en Cart.js
const Cart = ({ cartItems, handleCartClearance, handleRemove, handleAdd, amount, totalAmount, discount, setDiscount }) => {
Para mostrarlo:
<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>
No veo ningún problema con la lógica y debería funcionar bien, pero personalmente usaría Redux para hacer eso.