Hide Ionic React button on click

Question

How do I hide this Ionic React button 'Submit' on clicking itself?

    <IonButton
        size="large"
        color="primary"
        expand="full"
        onClick={() => {
          showOptionCardDisplay();
        }}
      >
        Submit
      </IonButton>

Answer 1

You can use Hooks:useRef to attach the button. Then you can do whatever to it. For example in this case set an attribute like "hidden" to "true".

const btnref = useRef<HTMLIonButtonElement>(null);

...

<IonButton
 size="large"
 color="primary"
 expand="full"
 ref={btnref}
 onClick={() => { setIsShowBtn(false); btnref.current?.setAttribute("hidden","true");}}
 shape="round"
 >
  Submit
</IonButton>

Answer 2

you can use something like below to hide the button, but I think I use the wrong approach.

const showOptionCardDisplay = (() => {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  });

 <div id="myDIV">
  <IonButton
     size="large"
     color="primary"
     expand="full"
     onClick={() => {
      showOptionCardDisplay();
     }}>
     Submit
   </IonButton>
 </div>

Answer 3

use flag to hide button. example:

const isHidden = useState(false);

{ 
 isShowBtn && ( 
  <IonButton
   size="large"
   color="primary"
   expand="full"
   onClick={() => { setIsShowBtn(false); })
  >
   Submit
  </IonButton>
)}

Answer 4

While searching I've found how to use ternary operator to change icon of a button, similar approach can be used to hide button

const [playing, setPlaying] = useState(false);
const play = () => { 
    if (playing == true){
      // stop and start again
      player.playbackManager.pause(); 
      setPlaying(false);
    }else{
      // play 
      player.playbackManager.play();
      setPlaying(true);
    }
  };


  return (
   <div>
   <div className="controller-bar"> 
        <IonButton component="span" onClick={play}>
           
 {playing ? ( <PlayArrow />  ) : (   <Pause/> )}
        </IonButton> 
  </div>
  );
}

And here how to hide button

   return (
       <div>
       <div className="controller-bar"> 
{playing ? ( 
            <IonButton component="span" onClick={play}>
               
     <PlayArrow />
            </IonButton> 
) : ( null )}
      </div>
      );
    }