1

I'm trying to make a Custom Modal Component to use across an app I'm working on, in which I pass as a prop another component to show inside it, for example to load data for a user. But I'm struggling with an issue can't be solved: When the user clicks inside or outside the modal, it closes.

The main call to the modal looks like this:

export const ListTable = (data) => {
...

const [modalState, setModalState] = useState(false);
    
const toggleModal = () => { setModalState(!modalState) }

...
return (

...

<ModalWindow {...datos} isOpen={modalState} toggle={toggleModal}/> 

And the Custom Modal looks like this

export const ModalWindow = (data = null) => {
const ComponentToShow = data.component;

   return (

       <>

         <Modal

           show={data.isOpen}

           backdrop={"static"}

           keyboard={true}

         >

         <Modal.Header closeButton>

           <Modal.Title>Modal title</Modal.Title>``` 

         </Modal.Header>

         <Modal.Body> 

             <ComponentToShow data={data}/>

         </Modal.Body>

       </Modal>

     </> 

   );} 
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
MatiCepe
  • 13
  • 3

0 Answers0