Dear
This is the main component of the application. As you can see in IonComponent there are two buttons and a component called NewAccountRegister, which I want to be hidden until a button is pressed. Then RegisterNewAccount should be shown and the buttons hidden
What is the best way to hide the buttons and show RegisterNewAccount component?
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_central">
<Boton name="Nueva cuenta de usuario" onClick={() =>registroUsuario()}></Boton>
<Boton name="Nueva cuenta de servicio" onClick={() =>registroUsuario()}></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(){
}
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>
);
};
1 post - 1 participant
