reactjsionic-frameworkreduxreact-statebreadcrumbs

How do I make an Ionic breadcrumb clickable subject to state conditions?

I'm using Ionic 7 with React 18. I want to display a breadcrumb to illustrate where the user has gotten to when going through a series of steps. I would like only steps that are completed to be clickable in the breadcrumb. The steps are stored as part of my state (I use Redux-Toolkit for this). Is there an elegant way to do this? I have the below...

// get state from Redux  
const step = useSelector((state: RootState) => state.step);

function isStep3Completed(): boolean {
  return step === StepsEnum.STEP4;
}

<IonBreadcrumbs>
  <IonBreadcrumb href="#step1">Step 1</IonBreadcrumb>
  <IonBreadcrumb href="#step2">Step 2</IonBreadcrumb>
  {isStep3Completed() ? (
    <IonBreadcrumb href="#step3">Step 3</IonBreadcrumb>
  ) : <IonBreadcrumb >Step 3</IonBreadcrumb>}
  <IonBreadcrumb href="#step4">Step 4</IonBreadcrumb>
</IonBreadcrumbs>

but it seems a little cumbersome to code two different breadcrumbs based on whether the step is completed and I'm wondering if Ionic provides a more efficient way to do this.

Solution

  • Instead of conditionally rendering entire BreadCrumb components you can conditionally pass props.

    <IonBreadcrumb {...isStep3Completed() ? { href: "#step3" } : {}}>
  Step 3
</IonBreadcrumb>