React Handbook

​x
​
function App () {
  const [showModal, setShowModal] = React.useState(false)
  
  const handleClick = () => {
    setShowModal(true)
  }
  
  return (
    <React.Fragment>
      <button onClick={handleClick}>
        Show modal
      </button>
      {showModal && <Modal onToggle={setShowModal} />}
    </React.Fragment>
  )
}
​
function Modal ({ onToggle }) {
  const handleClose = (event) => {
    onToggle(false)
  }
  
  // we have to stop the event propagation, so the event doesn't bubble up
  // try removing this method to see clicking inside div propagates into its parent
  const handleStop = (event) => {
    event.stopPropagation()
  }
  
  return (
    <div className="modal-backdrop" onClick={handleClose}>
      <div className="modal-body"  onClick={handleStop}>
        This is your modal window
        <br />
        <button className="primary">
          Click and keep the modal open
        </button>
      </div>

If you want to close a modal window when you click its background, but wish to keep it open when we click inside it, use event.stopPropagation() to prevent the click from bubbling up to the parent element.