0

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

aimad azza
  • 3
  • 1
  • 2

2 Answers2

2

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.

Paweł Moskal
  • 613
  • 7
  • 10
Sogand Saleh
  • 36
  • 2
  • 1
    Thank you, it solves the problem, but the question is why flowbite modals have this issue, i read their docs and they said that data-modal-toggle will handle the open and the close action without the need of useState. i have opened an issue in their github project. thank you one more time – aimad azza May 25 '22 at 15:55
0
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)} />
</>
}
Robiul Islam
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](https://stackoverflow.com/help/how-to-answer). – Vimal Patel Nov 13 '22 at 16:59