{"section":"known-issues","requestedLocale":"en","requestedSlug":"openclose-modal-hook-affects-all-modals-on-the-page","locale":"en","slug":"openclose-modal-hook-affects-all-modals-on-the-page","path":"docs/en/known-issues/FastStore/openclose-modal-hook-affects-all-modals-on-the-page.md","branch":"main","content":"## Summary\n\n\nOn opening/closing a modal the action affects all the modals of the page\n\n\n#### Simulation\n\n\nTry opening a modal on a page with more than one\nLook for the other modals, you'll see the behavior will be the same\n\n\n#### Workaround\n\n\nYou can use a customized state instead of the native one. Here is an example:\n\n     import \\{ useState \\} from \"react\";import \\{ Modal, ModalHeader, ModalBody, LinkButton, Icon \\} from \"@faststore/ui\";import ModalContent from \"./ModalContent\";import section from \"./styles.module.scss\";const ModalSelector = () => \\{const [showModal, setShowModal] = useState(false);const ToggleModal = () => \\{setShowModal((showModal) => !showModal);\\};return (\\} > Delivery \\{showModal && ( \\<\\> )\\});\\};export default ModalSelector;"}