0

Estoy haciendo un modal en hooks que abra y cierre con botones, pero no pasa nada.

function CartTotal(props){

    const [open, setOpen] = useState(false);

    function handleOpen(){

       if(setOpen === true){
           return alert('Abierto')
       }
    }

    function handleClose(){
        if(setOpen === false){
            return alert('cerrado')
        }
    }
    return(
        <div>
           <div className="shopCart">
               <br/>
               <p className="total">Precio Total de Todo: ${totalPrice}</p>
               <br/>
               <p className="total">Total de Productos: {totalProducts}</p>
               <br/>
               <button open={open} onClick={handleOpen}>Open</button>
               <br/>
               <button onClick={handleClose}>Close</button>
           </div>
        </div>
    )
}

export default CartTotal;

2 respuestas 2

1

Tal como dice la respuesta de @AdolfoOnrubia, setOpen es la función que modifica open, teniendo en cuenta esto, puedes hacer una sola función para abrir y cerrar:

function handleOpenClose(){
    alert((open)?"abierto":"cerrado");
    setOpen(!open);//<-- Siempre se cambia al contrario
}
1

La variable que contiene true o false es open setOpen es la función.

Debes cambiar:

function handleOpen(){

   if(setOpen === true){
       return alert('Abierto')
   }
}

function handleClose(){
    if(setOpen === false){
        return alert('cerrado')
    }
}

por

function handleOpen(){
   if(open === true){
       return alert('Abierto')
   }
}

function handleClose(){
    if(open === false){
        return alert('cerrado')
    }
}

y ya se quieres cambiar el estado llamar a la función también, quedaría así:

function handleOpen(){
   if(open === false){
       return alert('Abierto')
   }
   setOpen(true);
}

function handleClose(){
    if(open === true){
        return alert('cerrado')
    }
    setOpen(false);
}

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.