CODEWITHSUNDEEP
reactjstypescriptionic-framework
Siddhesh Shedge
Siddhesh Shedge

Reputation: 141

Show card section according to active IonSegmentButton

.tsx

import { IonCard, IonCardHeader, IonContent, IonPage, IonSegment, IonSegmentButton } from '@ionic/react';
import './example.css';

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

  return (
    <IonPage>
      <IonContent fullscreen class="ion-padding">
        <div>
          <IonSegment value="1" color="primary" mode="md">    
            <IonSegmentButton value="1">
                Segment 1
            </IonSegmentButton>
            <IonSegmentButton value="2">
                Segment 2
            </IonSegmentButton>
            <IonSegmentButton value="3">
                Segment 3
            </IonSegmentButton>
          </IonSegment>

          <div>   
            {/* Segment 1 Content */}
            <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  1
              </IonCardHeader>
            </IonCard>

            {/* Segment 2 Content */}
            <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  2
              </IonCardHeader>
            </IonCard>

            {/* Segment 3 Content */}
            <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  3
              </IonCardHeader>
            </IonCard>
          </div>

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

export default Example;

How to show the card section according to the active IonSegmentButton? As in angular, we use *ngSwitchCase="'1'" how to do in React?

useState can be used? Solution Please!

Ref.: https://ionicframework.com/docs/api/segment-button

ref. image: I want to only(1) card as per active IonSegmentButton, right now showing all 3 segment content.

Show card section as per active IonSegmentButton

Upvotes: 1

Views: 157

Answers (1)

Veenz
Veenz

Reputation: 390

You have to handle it with both onClick and useState. Basically you put onClick on each IonSegmentButton because it seems to not working onChange or onClick on the IonSegment component (weird).

So, for each IonSegmentButton you set a new state that we can define as

const [activeSegment, setActiveSegment] = useState("1") // Defining 1 as the default active segment

There is the working code of the proposed solution:

import { IonCard, IonCardHeader, IonContent, IonPage, IonSegment, IonSegmentButton } from '@ionic/react';
import { useState } from 'react';
import './ExploreContainer.css';

const ExploreContainer: React.FC = () => {
  const [activeSegment, setActiveSegment] = useState("1") // Defining 1 as the default active segment
  return (
    <IonPage>
      <IonContent fullscreen class="ion-padding">
        <div>
          <IonSegment value={activeSegment} color="primary" mode="md">    
            <IonSegmentButton value="1" onClick={(e) => setActiveSegment(e.currentTarget.value)}>
                Segment 1
            </IonSegmentButton>
            <IonSegmentButton value="2" onClick={(e) => setActiveSegment(e.currentTarget.value)}>
                Segment 2
            </IonSegmentButton>
            <IonSegmentButton value="3" onClick={(e) => setActiveSegment(e.currentTarget.value)}>
                Segment 3
            </IonSegmentButton>
          </IonSegment>

          <div>   
            {/* Segment 1 Content */}
            {activeSegment === "1" && <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  1
              </IonCardHeader>
            </IonCard>}

            {/* Segment 2 Content */}
            {activeSegment === "2" && <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  2
              </IonCardHeader>
            </IonCard>}

            {/* Segment 3 Content */}
            {activeSegment === "3" && <IonCard class="ion-no-margin ion-padding-bottom">
              <IonCardHeader>
                  3
              </IonCardHeader>
            </IonCard>}
          </div>

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

export default ExploreContainer;

The ngSwitchCase directive doesn't exist for React. If you don't like the way I put the conditional rendering, you can move that logic inside a method that returns JSX. You can refer to the official documentation to understand better conditional rendering.

Upvotes: 1

Related Questions