0

buenas tardes;

Tengo una consulta, quiero saber si existe alguna manera de hacer esto, tengo este codigo

    const ItemDetail = ({ item }) => {
  const [AddCart, setAddCart] = useState(false);

  const cartContext = useContext(CartContext)
  const { addToCart, deleteCartItemById } = cartContext

  const onAdd = (qty) => {
    if (qty > 0) {
      addToCart(item, qty)
      setAddCart(true)
    } else {
      setAddCart(false)
    }
  }


  return (
    <div className="detailContainer">
      <img className="imageDetail" src={item.imagen} alt={item.nombre} />
      <div className="detailsProduct">
        <h2>{item.nombre}</h2>
        <h3>{item.descripcion}</h3>
        <h4>${item.precio}</h4>
        {AddCart ? (
          <>
            <Link to="/cart">
              <button className="toCartButton">Terminar Compra</button>
            </Link>
            <button className="borrarElemento" onClick={deleteCartItemById}>Borrar este elemento del carrito</button>
          </>
        ) : (
          <ItemCount initial={0} stock={item.stock} onAdd={onAdd} item={item} />
        )}
      </div>
    </div>
  );
};

export default ItemDetail;

Mi consulta es la siguiente, al tener 'deleteCartItemById' que es una funcion recibida por context, necesito que al ejecutarse el evento OnClick, tambien este evento dispare un cambio de de estado sobre SetAddCart, pasandolo a falso, y no lo estoy pudiendo lograr, alguien me puede aclarar un poco en que estoy fallando?

1 respuesta 1

1

De acuerdo a lo que entendí, tú problema es que el evento onClick dispara la función deleteCartItemById y necesitas aparte que se ejecute el cambio de estado de setAddCart.

Cuando quieras ejecutar dos o más tareas diferentes cuando se dispare el evento onClick en el mismo elemento lo que puedes hacer es generar otra función. Entonces de acuerdo con tu problema, podrías crear una función llamada handleClick y ahí ejecutar ambas cosas, tanto el deleteCartItemById como setAddCart, entonces tu código quedaría de la siguiente manera

const handleClick = () => {
  deleteCartItemById()
  setAddCart(false)
}

Y esa sería la función que le pasarías a tu onClick

<>
  <Link to="/cart">
    <button className="toCartButton">Terminar Compra</button>
  </Link>
  <button className="borrarElemento" onClick={handleClick}>Borrar este elemento del carrito</button>
</>
1
  • Debo tomarme un descanso, tienes razon, podria haber invocado a la funcion dentro de la constante, pero al hacerlo estaba olvidando el parentesis, y me daba error, y no entendia por que. Gracias Juan Commented el 6 dic. 2021 a las 1:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.