# Hide a component

**URL:** <https://forum.ionicframework.com/t/hide-a-component/197278>\
**Category:** Ionic React\
**Created:** [October 2, 2020, 1:11pm UTC](https://forum.ionicframework.com/t/hide-a-component/197278 "2020-10-02T13:11:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![julianov403](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/julianov403/32/134095_2.png) [@julianov403](https://forum.ionicframework.com/u/julianov403)\
**Post date:** [October 2, 2020, 1:11pm UTC](https://forum.ionicframework.com/t/hide-a-component/197278/1 "2020-10-02T13:11:36Z")

</div>

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?

```auto
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

```auto
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>
  );
};

```

---

<div class="post-metadata">

**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\
**Post date:** [October 2, 2020, 1:45pm UTC](https://forum.ionicframework.com/t/hide-a-component/197278/2 "2020-10-02T13:45:00Z")

</div>

```auto
{ condition === true ? <RegistroNuevaCuenta></RegistroNuevaCuenta> : null }

```

---

<div class="post-metadata">

**Author:** ![julianov403](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/julianov403/32/134095_2.png) [@julianov403](https://forum.ionicframework.com/u/julianov403)\
**Post date:** [October 2, 2020, 1:51pm UTC](https://forum.ionicframework.com/t/hide-a-component/197278/3 "2020-10-02T13:51:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\
**Post date:** [October 2, 2020, 1:55pm UTC](https://forum.ionicframework.com/t/hide-a-component/197278/4 "2020-10-02T13:55:11Z")

</div>

i need to see more code, not understanding

---

<div class="post-metadata">

**Author:** ![julianov403](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/julianov403/32/134095_2.png) [@julianov403](https://forum.ionicframework.com/u/julianov403)\
**Post date:** [October 2, 2020, 2:40pm UTC](https://forum.ionicframework.com/t/hide-a-component/197278/5 "2020-10-02T14:40:47Z")

</div>

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

```auto
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;

```