Hi there! I've html markup which looks like this: <div class="snippet-clipboar

Multiple modals on one page? about react-modal-dialog HOT 1 OPEN

qimingweng commented on June 2, 2024

Multiple modals on one page?

from react-modal-dialog.

Comments (1)

mozart27 commented on June 2, 2024

You can have multiple modal dialogs in the same component. Consider a page with a save-modal and a discard-modal as below. In my example, I'm not using the ModalContainer's onClose nor the ModalDialog's onClose. But this example should still work if you are using them.

You'll want a flag per modal dialog in your state object.

  state = {
    isShowingSaveModal: false,
    isShowingDiscardModal: false
  };

Then, in the render you can have something like this:

        {/* Below is the save confirmation modal dialog */}
        <div>
          {this.state.isShowingSaveModal &&
            <ModalContainer>
              <ModalDialog>
                <h4>Save Changes?</h4>
                <p>Are you sure you wish to save the changes you have made?</p>
                <NoButton className={'btn btn-md'} onClick={() => this.cancelSave()}>No</NoButton>
                <YesButton className={'btn btn-md btn-brand'} onClick={() => this.save()}>Yes</YesButton>
              </ModalDialog>
            </ModalContainer>}
        </div>
        {/* Below is the discard confirmation modal dialog */}
        <div>
          {this.state.isShowingDiscardModal &&
            <ModalContainer>
              <ModalDialog>
                <h4>Discard Changes?</h4>
                <p>Are you sure you wish to discard the changes you have made?</p>
                <NoButton className={'btn btn-md btn-brand'} onClick={() => this.cancelDiscard()}>No</NoButton>
                <YesButton className={'btn btn-md'} onClick={() => this.discard()}>Yes</YesButton>
              </ModalDialog>
            </ModalContainer>}
        </div>

This has worked successfully for me. I hope this helps.

Cheers!

from react-modal-dialog.

Recommend Projects