Additional props using overlay hooks

Is there any way to elegantly pass props to components using the new overlay hooks in Ionic 5.6 ?

This is my code currently that is working but using state.

const PopoverList: React.FC<{
  onHide: () => void;
  type: string;
}> = ({ onHide, type }) => (
  <IonList>
    <IonListHeader>Ionic</IonListHeader>
    <IonItem button>Learn Ionic</IonItem>
    <IonItem button>Documentation</IonItem>
    <IonItem button>Showcase</IonItem>
    <IonItem button>{type}</IonItem>
    <IonItem lines="none" detail={false} button onClick={onHide}>
      Close
    </IonItem>
  </IonList>
);

const Foo: React.FC<ContainerProps> = () => {
  const [type, setType] = useState<string>("");
  const [present, dismiss] = useIonPopover(PopoverList, {
    onHide: () => dismiss(),
    type: type,
  });

return (
<IonButton
                expand="block"
                onClick={(e) => {
                  setType("hello");
                  present({
                    event: e.nativeEvent,
                  });
                }}
              >
                Show Popover
              </IonButton>
);

As you can see I create a string state called “type” that is referenced to useIonPopover. Then before present() function is called, update the state. However, is there any way to pass the “type” in the present of the popover directly?

1 post - 1 participant

Read full topic