Home / Questions / 288821
Accepted
Angel
Asked: 2020-08-29 08:12:20 +0800 CST 2020-08-29 08:12:20 +0800 CST

Open/Close buttons with hooks

  • 772

I'm making a modal in hooks that opens and closes with buttons, but nothing happens.

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;
javascript

2 Answers

  1. The variable that contains trueor falseis open setOpenis the function.

    You must change:

    function handleOpen(){

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

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

    by

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

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

    and if you want to change the state to call the function too, it would look like this:

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

function handleClose(){
    if(open === true){
        return alert('cerrado')
    }
    setOpen(false);
}
    • 1
  2. Best Answer

    As @AdolfoOnrubia's answer says, it setOpenis the function that modifies open, considering this, you can make a single function to open and close:

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