CODEWITHSUNDEEP
reactjsmodal-dialogtailwind-cssflowbite
aimad azza
aimad azza

Reputation: 3

Flowbite Modal does not open when switching between pages until you refresh the page

in mobile screen when the page load for the first time and you click the button to open the modal it does open, but after you go to another page and try to open another modal it does not open and you should refresh the page again and again every time you go to another page.enter image description here

Upvotes: 0

Views: 5426

Answers (2)

Sogand Saleh
Sogand Saleh

Reputation: 36

You have to use "useState" in your code to manage situation of opening or closing modal, like this :

const Main = () => {
    const [visible, setVisible] = useState(false)

    return (
        <>
            <button onClick={() => setVisible(true)}>Open Modal</button>
            <Modal visible={visible} ... />
        </>
}

in your modal, you have to check the value of props(visible) and then show whether the modal also defines setVisible(false) when onClose is clicked.

Upvotes: 2

Robiul Islam
Robiul Islam

Reputation: 1

import{ useState } from "react";

const ModalFlowbite = () => {
const [modalIsOpen,modalIsOpen]=useState(false);

const handleModalOpen = () =>{
  setVisible(true)
}

return(
<>
   <button onClick={handleModalOpen}>Open Modal</button>
   <Modal show={modalIsOpen} onClose={() => setVisible(false)} />
</>
}

Upvotes: 0

Related Questions