I am trying to pass user data from my main page component to a details page component. I am currently mapping the user data in to a custom Ionic Component. When the custom component is clicked on in the main page, I need it to send the user data to the detail page and render the detail page using the data passed in from the main page.
Main.tsx:
const userAPILink: string = "https://randomuser.me/api/";
const usersToRender: number = 5;
const Main: React.FC<RouteComponentProps> = ({ history }) => {
interface IUser {
data: {
name: string;
email: string;
icon: string;
country: string;
};
}
const [userList, setUserList] = useState<IUser[]>([]);
useEffect(() => {
for (let i = 0; i < usersToRender; ++i) {
(async () => {
const res = await axios.get(userAPILink);
let tempUser: IUser = {
data: {
name: `${res.data.results[0].name.first} ${res.data.results[0].name.last}`,
email: `${res.data.results[0].email}`,
icon: `${res.data.results[0].picture.thumbnail}`,
country: `${res.data.results[0].location.country}`,
},
};
setUserList((userList) => {
return [...userList, tempUser];
});
})();
}
}, []);
return (
<IonPage>
<IonHeader>
<IonToolbar mode="ios">
<IonIcon slot="end" ios={optionsOutline} />
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle className="ionTextCenter">LOGO</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen className="ionPadding">
<IonHeader collapse="condense"></IonHeader>
<IonSegment>
<IonSegmentButton>Tab 1</IonSegmentButton>
<IonSegmentButton>Tab 2</IonSegmentButton>
<IonSegmentButton>Tab 3</IonSegmentButton>
</IonSegment>
<IonList>
{userList.map((user, index) => {
return (
<IonItem
key={index}
onClick={(e) => {
e.preventDefault();
history.push({
pathname: `/detail/${user.data.name}`,
state: [
user.data.name,
user.data.email,
user.data.icon,
user.data.country,
],
});
}}
>
<UserCard id={index} data={user.data}></UserCard>
</IonItem>
);
})}
</IonList>
</IonContent>
</IonPage>
);
};
export default Main;
UserCard.tsx
type UserCardProps = {
id: number,
data: {
name: string;
icon: string;
email: string;
country: string;
};
};
class UserCard extends React.Component<UserCardProps> {
render() {
return (
<IonCard
// routerLink={`detail/${this.props.data.name}`}
id={this.props.data.name}
>
<IonCardHeader className="card-header">
<IonGrid>
<IonRow>
<IonCol size="3">
<IonAvatar>
<img src={this.props.data.icon} />
</IonAvatar>
</IonCol>
<IonCol size="9">
<IonCardTitle>{this.props.data.name}</IonCardTitle>
<IonCardSubtitle>{this.props.data.email}</IonCardSubtitle>
</IonCol>
</IonRow>
</IonGrid>
</IonCardHeader>
<IonCardContent>
<IonText>
<IonLabel>{this.props.data.country}</IonLabel>
</IonText>
<IonImg className="character-img"></IonImg>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</IonCardContent>
</IonCard>
);
}
}
export default ({
id,
data,
}:
{
id: number
data: {
name: string;
icon: string;
email: string;
country: string;
};
}) => (
<UserCard
id={id}
data={data}
></UserCard>
);
Detail.tsx
interface DetailProps extends RouteComponentProps<{
name: string;
country: string;
email: string;
icon: string;
}> {}
const Detail: React.FC <DetailProps> = ({match, history}) => {
return (
<IonPage>
<DetailComponent id={3} name="Bob" email="email" country="canada" icon="icon" />
</IonPage>
);
};
export default Detail;
DetailComponent.tsx
type DetailItemProps = {
id: number;
name: string;
icon: string;
email: string;
country: string;
};
class DetailItem extends React.Component<DetailItemProps> {
render() {
return (
<IonHeader>
<IonToolbar mode="ios">
<IonIcon slot="end" ios={optionsOutline} />
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle className="ionTextCenter">{this.props.name}</IonTitle>
</IonToolbar>
</IonHeader>
);
}
}
export default ({
id,
name,
icon,
email,
country,
}: {
id: number;
name: string;
icon: string;
email: string;
country: string;
}) => (
<DetailItem
id={id}
name={name}
icon={icon}
email={email}
country={country}
></DetailItem>
);