Simple React modal

Modal.css

.modal {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.modal-main {
  position:fixed;
  background: white;
  width: 80%;
  height: auto;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  padding: 1em;
}

Modal.jsx

import "./Modal.css";

const Modal = (props) => {
  if (props.show) {
    return (
      <div className="modal">
        <section className="modal-main">
          {props.children}
          <button type="button" onClick={props.handleClose}>
            Close
          </button>
        </section>
      </div>
    );
  }
};

export default Modal;