Import react modal component

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" />
                    &nbsp;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" />
                &nbsp;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>
    </>
  );
};