hide/show ion-card element reactJS

Question

I am relatively new to reactJS and Ionic but I am trying to switch between hide/show using a function and calling the function in a button like so:

function myFunction(q1:string,q2:string) {
    var x = document.getElementById(q1);
    var y = document.getElementById(q2);
    if(x !== null){
    if (x.style.display === "none") {
      x.style.display = "block";
      y.style.display = "none";
     } else {
      x.style.display = "none";
      y.style.display = "block";
    }
  }
  }

I am getting the error that y object is possibly null but struggling to troubleshoot the issue. the corresponding html is as follows

  <IonCard id="q1">
          <IonCardHeader>
            <IonCardSubtitle>Quiz 1</IonCardSubtitle>
            <IonCardTitle>Question 1</IonCardTitle>
          </IonCardHeader>

          <IonCardContent>
           <IonImg src={require("../../Images/Hello.gif")}/> 
           <br></br>
           <IonButton expand="full" >Goodbye</IonButton>
           <br></br>
           <IonButton expand="full" onClick={() =>myFunction("q1","q2")} >Hello</IonButton>
           <br></br>
           <IonButton expand="full" >Excuse Me</IonButton>
           <br></br>
           <IonButton expand="full" >Test</IonButton>
      </IonCardContent>
        </IonCard>


        
        <IonCard id="q2">
          <IonCardHeader>
            <IonCardSubtitle>Quiz 1</IonCardSubtitle>
            <IonCardTitle>Question 2</IonCardTitle>
          </IonCardHeader>

          <IonCardContent>
           <IonImg src={require("../../Images/Hello.gif")}/> 
           <br></br>
           <IonButton expand="full" >Goodbye</IonButton>
           <br></br>
           <IonButton expand="full" >Hello</IonButton>
           <br></br>
           <IonButton expand="full" >test</IonButton>
           <br></br>
           <IonButton expand="full" >tester</IonButton>
      </IonCardContent>
        </IonCard>

Any help would be greatly apreciated, thanks!

Answer 1

You could do that using useState hook:

const App = () => {

  const [ showHide, setShowHide ] = useState(false);

  const handleToggle = () => {
    setShowHide(!showHide)
  }

  return (
      <div>

      {
        showHide
        ? <p>
            Start editing to see some magic happen :)
          </p>
        : <p>
            New content
          </p>
      }
        

        <button onClick={ handleToggle }>Toggle</button>
      </div>
    );
}


render(<App />, document.getElementById('root'));

Look this example working:

https://stackblitz.com/edit/react-ts-e52hsp?file=index.tsx