Estoy intentando ejecutar dos funciones cuando se hace clic en un botón. Cada función funciona de forma independiente, sin embargo, handleSubmit() no hace nada cuando escribo onClick como una función de flecha. Cuando hago clic en el botón con ambas funciones, solo se ejecuta editCart(). Si intento esto sin usar una función de flecha, obtengo un error de "demasiados renderizados". También intenté crear una función contenedora única que llame a ambas funciones sin suerte. Aparte, ¿paso los parámetros para cada función en la función de flecha onClick?

 const { register, watch, handleSubmit, setValue } = useForm({ defaultValues: { hoodieQuantity: 1, }, }); const onSubmit = (data) => { console.log(data); }; const hoodieQuantity = watch("hoodieQuantity"); const increaseQuantity = () => setValue("hoodieQuantity", hoodieQuantity + 1); const decreaseQuantity = () => { if (hoodieQuantity > 1) { setValue("hoodieQuantity", hoodieQuantity - 1); } }; const cartArray = [ { name: "Hoodie", quantity: "0" }, { name: "Sweats", quantity: "0" }, { name: "Shirt", quantity: "0" }, { name: "Mousepad", quantity: "0" }, ] const [currentCart, setCurrentCart] = useState(cartArray); const editCart = () => { setCurrentCart(currentCart.map((cartItem, hoodieQuantity) => cartItem.name === "Hoodie" ? { ...cartItem, quantity: {hoodieQuantity} } : { ...cartItem } ) ); console.log(cartArray); };

 <CounterContainer> <CounterWrapper> <CounterButtons onClick={decreaseQuantity}> - </CounterButtons> </CounterWrapper> <CounterWrapper> <CounterInput // quantity={quantity} {...register("hoodieQuantity")} placeholder="HoodieQuantity" id="hoodieQuantity" type="number" > {hoodieQuantity} </CounterInput> </CounterWrapper> <CounterWrapper> <CounterButtons onClick={increaseQuantity}> + </CounterButtons> </CounterWrapper> </CounterContainer>

 <Btn onClick={() => [handleSubmit(onSubmit), editCart("Hoodie", hoodieQuantity)] }>Add to Cart</Btn>