Why the button inside the modal not working in Ionic?

I have created an ionic app. In the followig code, I have created a popover which some contents from json. When button clicked in popover it opens a modal which contain a button with onclick function.

But the function does not get called. I have tried same with two modal but still not working?

let courseNumber = 0;

interface ContainerProps {
  courseNum: number,
  onHide: () => void,
}


const PopoverList: React.FC<ContainerProps> = ({ courseNum, onHide }) => {
  const [showTopicModal, setShowTopicModal] = useState(false);

  return (
    <><IonToolbar>
      <IonTitle size="large">{courseJson[courseNumber]['title']}</IonTitle>
    </IonToolbar><IonContent>
        {courseJson[courseNumber]["content"].map((item) => <IonItemDivider key={item.toString()}>
          <IonLabel>{item}</IonLabel>
        </IonItemDivider>
        )}
      </IonContent>

      <IonButton slot='bottom' size='default' color="success" expand='block' onClick={() => setShowTopicModal(true)}>Learn</IonButton>

      <IonModal isOpen={showTopicModal} id="topic_modal">
        <IonButton slot='bottom' size='default' color="success" expand='block' onClick={() => console.log("hello")}>Learn</IonButton>
      </IonModal>
    </>
  )
}

1 post - 1 participant

Read full topic