CODEWITHSUNDEEP
typescriptreact-typescriptionic-react
I'm Clueless
I'm Clueless

Reputation: 3

How to pass props to tab in Ionic React

I'm trying to pass an array to a tab as a prop, but I am getting a confusing error.

Here is the code:

 <IonRouterOutlet>
      <Route path="/tab1" render={props => (<Tab1 loanProps={loans}  />)} /> />
      <Route path="/tab2" component={Tab2} />
      <Route path="/tab3" component={Tab3} />
      <Route path="/" render={() => <Redirect to="/tab1" />} />
 </IonRouterOutlet>

Here is the error that shows when I hover over Tab1

This is what it says

Type '{ loanProps: Loan[]; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'loanProps' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'

I am also unsure of how to access the props in the tab1 page. I am trying to map the array passed as a prop here:

const Tab1: React.FC = () => {
 
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Select A Loan</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding"

        <IonList>
          {loans && loans.map((loan, index) => <IonItem key={index}><IonText>{loan.name} {loan.principle} {loan.interest}</IonText></IonItem>)}
        </IonList>
     
      </IonContent>
    </IonPage>
  );
};

Any help would be appreciated, thanks.

Upvotes: 0

Views: 1717

Answers (1)

Mark
Mark

Reputation: 495

You could try:

const Tab1: React.FC<{loan:any[]}> = ({loan}) ...

and

<Route path="/tab1" render={loans => (<Tab1 loan={loans}  />)} /> />

Upvotes: 1

Related Questions