0

I'd like to have a Registration/Login component that can be switched between by using ion-segment. It's straightforward with ReactJS, but I don't know how to do it with the TypeScript version of React. How do you conditionally display different components with ion-segment?

Thanks in advance!

        <IonToolbar>
        <IonSegment value ="register"  onIonChange={(e) => handleSegmentChange(e)}>
            <IonSegmentButton value="register">
                    <IonLabel>Register</IonLabel>
            </IonSegmentButton>
            <IonSegmentButton value="login">
                    <IonLabel>Login</IonLabel>
            </IonSegmentButton>
        </IonSegment>
    </IonToolbar>
    </IonHeader>
    <IonContent>
        <IonCard>
            Register card that appears when I click the "Register" segment
        </IonCard>
        <IonCard>
            Login card  that appears when I click the "Login" segment
        </IonCard>
    </IonContent>

Here's what I'm trying to accomplish.

enter image description here

1 Answers1

1

Find out the solution below. For me is working properly.

import {
  IonCard,
  IonContent,
  IonHeader,
  IonLabel,
  IonPage,
  IonSegment,
  IonSegmentButton,
  IonToolbar,
} from "@ionic/react";
import React, { useState } from "react";

const Segments = () => {
  const [registerActive, setRegisterActive] = useState<boolean>(true);
  const [loginActive, setLoginActive] = useState<boolean>(false);
  

  return (
    <React.Fragment>
      <IonPage className="ion-page" id="main-content">
        <IonHeader>
          <IonToolbar>
            <IonSegment  value={registerActive ? "register" : "login"}>
              <IonSegmentButton
                value="register"
                onClick={() => {
                  setLoginActive(false);
                  setRegisterActive(true);
                }}
              >
                <IonLabel>Register</IonLabel>
              </IonSegmentButton>
              <IonSegmentButton
                value="login"
                onClick={() => {
                  setRegisterActive(false);
                  setLoginActive(true);
                }}
              >
                <IonLabel>Login</IonLabel>
              </IonSegmentButton>
            </IonSegment>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">
          {registerActive ? (
            <IonCard>
              Register card that appears when I click the "Register" segment
            </IonCard>
          ) : (
            <IonCard>
              Login card that appears when I click the "Login" segment
            </IonCard>
          )}
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};

export default Segments;

enter image description here enter image description here

Hope this helps you!

Ani
  • 788
  • 3
  • 7
  • 21
  • You really only need one const / useState and then select the appropriate tab based on whether this state is true or false. – Phill Healey Nov 09 '21 at 11:18