Hide a component

Ionic Framework Ionic React
1

Hello.

This is a register page. What I want to do is hide at first time and show it when a button is clicked. Could you please help me?

const Registro: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>CallServices</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Registro</IonTitle>
          </IonToolbar>
        </IonHeader>
     
           <div className="contenedor_central2">
            <Boton name="Nueva cuenta de usuario" onClick={() =>registroUsuario(0)}></Boton>
        
            <Boton name="Nueva cuenta de servicio" onClick={() =>registroUsuario(0)}></Boton> 
          </div>
          <RegistroNuevaCuenta></RegistroNuevaCuenta>

      </IonContent>
    </IonPage>
  );
};

and

const RegistroNuevaCuenta: React.FC = ( ) => {

  const [text, setText] = useState<string>();
  const [number, setNumber] = useState<number>();

  let drawingBuffer:HTMLElement = document.getElementsByClassName("contenedor_central")[0] as HTMLElement;
  drawingBuffer.style.display='none';

  return (
    <div className="contenedor_central">
      <strong>Completá tus datos</strong>
      
      <IonItem>
        <IonLabel position="floating">Nombre</IonLabel>
        <IonInput value={text}></IonInput>
      </IonItem>
      <IonItem>
        <IonLabel position="floating">Apellido</IonLabel>
        <IonInput value={text}></IonInput>
      </IonItem>
      <IonItem>
        <IonLabel position="floating">E-mail</IonLabel>
        <IonInput value={text}></IonInput>
      </IonItem>
      <IonItem>
        <IonLabel position="floating">Clave</IonLabel>
        <IonInput value={text}></IonInput>
      </IonItem>

      <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
    </div>
  );
};
2 
{ condition === true ? <RegistroNuevaCuenta></RegistroNuevaCuenta> : null }
3

thanks. How can I implement it? where I can I set condition equal false if Registro is a function

4

i need to see more code, not understanding

5

What I want to do is at first hide RegistroNuevaCuenta and when the buttons are pressed show it and hide the buttons.

const Registro: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>CallServices</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Registro</IonTitle>
          </IonToolbar>
        </IonHeader>
     
           <div className="contenedor_central2">
            <Boton name="Nueva cuenta de usuario" onClick={() =>registroUsuario(0)}></Boton>
        
            <Boton name="Nueva cuenta de servicio" onClick={() =>registroUsuario(0)}></Boton> 
          </div>
          <RegistroNuevaCuenta></RegistroNuevaCuenta>
      </IonContent>
    </IonPage>
  );
};

const Boton = (props: { name: React.ReactNode, onClick: () => void}) => 
   (<div className="center-div">
     <IonButton shape="round" onClick={props.onClick}> 
      {props.name}
    </IonButton>
 </div>);
 
 function registroUsuario(arg: number) {
 
}



const RegistroNuevaCuenta: React.FC = ( ) => {

  const [text, setText] = useState<string>();
  const [number, setNumber] = useState<number>();


  return (
    <div className="contenedor_central">
      <strong>Completá tus datos</strong>
      
      <IonItem>
        <IonLabel position="floating">Nombre</IonLabel>
        <IonInput value={text}></IonInput>
      </IonItem>
      <IonItem>
        <IonLabel position="floating">Apellido</IonLabel>
        <IonInput value={text}></IonInput>
      </IonItem>
      <IonItem>
        <IonLabel position="floating">E-mail</IonLabel>
        <IonInput value={text}></IonInput>
      </IonItem>
      <IonItem>
        <IonLabel position="floating">Clave</IonLabel>
        <IonInput value={text}></IonInput>
      </IonItem>

      <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
    </div>
  );
};

export default Registro;