Having trouble passing an array as a prop to a tab and encountering a confusing error.
Below is the code snippet:
<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>
Encountering an error message when hovering over Tab1
The error message reads as follows:
Type '{ loanProps: Loan[]; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
Property 'loanProps' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'
Struggling with accessing the props in the tab1 page. Wanting 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>
);
};
If anyone has any insights or solutions, your help would be greatly appreciated. Thank you!