IonGrid, IonRow and IonSegment error

Hello Ionic React Community,

I am trying to integrate an IonGrid into an IonSegment, however, i fail.
I want to have the following:

<IonSegment onIonChange={(e) => e.detail.value}>
<IonGrid>
<IonRow>
<IonSegmentButton value="Seg1">
<IonLabel>Seg1</IonLabel>
</IonSegmentButton>
</IonRow>
<IonRow>
<IonSegmentButton value="Seg2">
<IonLabel>Seg2</IonLabel>
</IonSegmentButton>
</IonRow>
</IonGrid>
</IonSegment>

It seems the IonGrid wrapped by the Segment destroys the functionality
and no segment can be permanently selected anymore.

Do you have any ideas how to fix that so that a segment is still
highlighted?

I already tried to use
const [seg, setSeg] = useState('');
<IonSegment value={seg} onIonChange={(e) => setSeg(e.detail.value!)}>
Do not work either.

Also I wanted to know if someone can give a simple example
of how to change the content of the page depending on the segment
selected with ionic react.

Thanks for your help in advance.

Best regards
Chris

1 post - 1 participant

Read full topic