Import react modal component - reactjs

Question

I'm new to react , and created a react modal component to show an image with its close button.
const BoxModal = ({children, modalIsOpen, setModalIsOpen}) => {
return (
<>
<Modal
isOpen={modalIsOpen}
onRequestClose={() => setModalIsOpen(false)}
style={{
overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
zIndex: 2000,
},
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
border: 'none',
background: 'none',
transform: 'translate(-50%, -50%)',
padding: 0,
},
}}
>
{children}
<ButtonModal onClick={() => setModalIsOpen(false)}>
<img width={30} height={30} src={close_btn} alt="close" />
</ButtonModal>
</Modal>
</>
);
};
BoxModal.propTypes = {
children: PropTypes.element.isRequired,
modalIsOpen: PropTypes.bool,
setModalIsOpen: PropTypes.bool,
};
export default BoxModal;
Then, in another page I import I call it and import it like this:
<BoxModal>
<img
src={MapaRutas}
style={{
position: 'relative',
width: '100%',
}}
/>
</BoxModal>
<Button
width="260px"
height="60px"
color={'black'}
onClick={() => setModalIsOpen(true)}
>
<img width={13} height={13} src={map} alt="map" />
Ver cobertura de YoCargo
</Button>
I use react state to pass the onclick function in the button
const [modalIsOpen, setModalIsOpen] = useState(false);
But it's not working, nothing happens.Can someone tell me how to fix it ?

Answer 1

What i suggest is to set function to close your modal as prop in your BoxModal component, i call it 'handleClose', also you forget to pass 'modalIsOpen' to it.
import React, { useState } from 'react';
const Sample = () => {
const [modalIsOpen, setModalIsOpen] = useState(false);
return (
<>
<BoxModal modalIsOpen={modalIsOpen} handleClose={() => setModalIsOpen(false)}>
<img
src={MapaRutas}
style={{
position: 'relative',
width: '100%',
}}
/>
</BoxModal>
<Button
width="260px"
height="60px"
color={'black'}
onClick={() => setModalIsOpen(true)}
>
<img width={13} height={13} src={map} alt="map" />
Ver cobertura de YoCargo
</Button>
</>
);
}
In your BoxModel, you get the props like that
const BoxModal = ({children, modalIsOpen, handleClose }) => {
return (
<>
<Modal
isOpen={modalIsOpen}
onRequestClose={handleClose}
style={{
overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
zIndex: 2000,
},
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
border: 'none',
background: 'none',
transform: 'translate(-50%, -50%)',
padding: 0,
},
}}
>
{children}
<ButtonModal onClick={handleClose}>
<img width={30} height={30} src={close_btn} alt="close" />
</ButtonModal>
</Modal>
</>
);
};