Hi all,
I want to use useIonModal() hook to show a modal according what I clicked.
For example, I have a list of students on a page, if I click a student’s name, then it will show me the detailed information about this student. so I use the useIonModal() hook, but I can’t figure out, how to pass the data to the modal. Hier is my way, I thought, it should work, but it is wrong…
You can also try the sandbox here:
What I want to do is simply, click Tom, then it popup “age: 16”; click “Jerry”, then popup “age: 12”.
So the question is how to pass the clicked item (“Tom” or “Jerry”) to the Modal…
// Home.tsx
const sourceData = [
{ name: "Tom", age: 16 },
{ name: "Jerry", age: 12 },
]
type TItem = {
name: string
age: number
}
const Home: React.FC = () => {
const [currentLineItem, setCurrentLineItem] = useState<TItem>()
const handleDismiss = () => {
dismiss()
}
const [present, dismiss] = useIonModal(LineItemModal, {
LineItem: currentLineItem,
onDismiss: handleDismiss,
})
const onEdithandler = (item: TItem) => {
setCurrentLineItem(item)
present()
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Test useModal Hook</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen className="ion-padding">
{sourceData.map((item) => (
<IonRow key={item.name}>
<IonCol>name: {item.name}</IonCol>
<IonCol>
<IonButton onClick={() => onEdithandler(item)}>
Click Me
</IonButton>
</IonCol>
</IonRow>
))}
</IonContent>
</IonPage>
)
}
export default Home
type Props = {
lineItem: TItem
onDismiss: () => void
}
const LineItemModal: React.FC<Props> = ({ lineItem, onDismiss }) => {
return (
<IonContent className="ion-padding">
<IonRow>age: {lineItem?.age}</IonRow>
<IonButton onClick={onDismiss}>close</IonButton>
</IonContent>
)
}
Thanks very much for the help!
