DEV Community

[Comment from a deleted post]
Collapse
 
fvaldes33 profile image
Franco Valdes • • Edited

Thanks for the post! Learning how to use Ionic with React myself. Quick question though, what is the reasoning behind having both, functional and class based components? Then only exporting the function?

export default ({closeAction, text}: { closeAction: Function, text: string }) => (
  <MyModal closeAction={closeAction} text={text}>
  </MyModal>
)

Couldn't you just export a functional component at that point like this?

export default const ModalComponent: React.FC<MyModalProps> = ({
  closeAction,
  text
}) => (
  <>
    <IonHeader>
      <IonToolbar color="primary">
        <IonTitle>My Modal</IonTitle>
        <IonButtons slot="end">
          <IonButton onClick={() => closeAction()}>
            <IonIcon name="close" slot="icon-only"></IonIcon>
          </IonButton>
        </IonButtons>
      </IonToolbar>
    </IonHeader>
    <IonContent className="ion-padding">
      <p>{text}</p>
    </IonContent>
  </>
);
Collapse
 
daviddalbusco profile image
David Dal Busco •

Absolutely no particular reason, you are right, both functional or class based components work fine for this use case.