I'm using react js on a simple project and what I'm trying to do is that if the user clicks the cancel button it pops up a modal that asks the user: If are you sure you want to cancel?. They are 2 options the first is: Go back(which returns the user at the page that is in the moment, and the second button is: Yes(which returns the user to the homepage)

The problem is that when the user click Go Back and click again the cancel button, it doesn't work. I have to refresh the button to make the cancel button work. I have used hooks to make the modal work.

ModalCancel.js

export default function ModalCancel({ showModal, setShowModal }) {
  const [open, setOpenModal] = useState(true)

  const navigate = useNavigate();

  const cancelButtonRef = useRef(null)

return (
    <div>
    { showModal ? <Transition.Root show={open} as={Fragment}>
      <Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" initialFocus={cancelButtonRef} onClose={()=>{}}>
        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
          </Transition.Child>

          {/* This element is to trick the browser into centering the modal contents. */}
          <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
            &#8203;
          </span>
          
              <div className="sm:flex sm:items-start">
                <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-modalMain sm:mx-0 sm:h-10 sm:w-10">
                  <ExclamationIcon className="h-6 w-6 text-white" aria-hidden="true" />
                </div>
                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                  <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-modalMain">
                    Are you sure?
                  </Dialog.Title>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">
                      Are you sure you want to cancel? All changes will be discarded.
                    </p>
                  </div>
                </div>
              </div>
              <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-modalMain text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
                  onClick={() => {navigate("/livestreaming");
                }}
                >
                  Yes
                </button>
                <button
                  type="button"
                 
                  onClick={() => setOpenModal(false)}
                  ref={cancelButtonRef}
                >
                  Go Back
                </button>
              </div>
            </div>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition.Root> : null }
    </div>

MainPage.js

export default function MainPage(){
   //Open the modal after clicking cancel
  const [showModal, setShowModal] = useState(false)

  const openModal = () => {
    setShowModal(prev => !prev);
  };

return (
<div>
    <div className="flex justify-end py-8">
          <button
            onClick={openModal}
            type="button"
            className="btn-third mr-4"
          >
            Cancel
          </button>
    </div>
</div>

<ModalCancel showModal={showModal} setShowModal={setShowModal}/>
);

Don't know why the cancel button doesn't work after I click to go back in the modal. I have to refresh the page to make it work.

CodePudding user response：

You mixing 2 ways of opening and closing the modal. These eventually conflict. Probably its best to remove the open/close functionality from ModalCancel.js and handle this logic in the parent.

export default function ModalCancel({ showModal, setShowModal }) {
  const [open, setOpenModal] = useState(true) // don't use this useState
  const navigate = useNavigate();

return (
  <Transition.Root show={showModal} as={Fragment}> // uses 'showModal' state from parent component
     <div>
        <button onClick={() => navigate("/livestreaming")}>
          Yes
        </button>
        <button onClick={() => setShowModal(false)}> // set state in parent component
          Go Back
        </button>
     </div>
  </Transition.Root>