I have this modal button and when I press it a modal shows up. I want it to be closed if click - outside - the modal-box, but now it regardless if i click outside or inside the modal-box the modal closes down. How to make the modal box close when pressed outside modal-box the react way?

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      show: false
    }
  }
  openModal() {
    this.setState( prevState => (
    {show: !prevState.show}))
  }
  closeModal() {
    this.setState({show: false})
  }
  render() {
    return (
      <div>
      <button id='button' onClick={() => this.openModal()}>the modal button</button>
        {this.state.show && <div id='modal' onClick={() => this.closeModal()}>
        <div className="modal-box">
          <h1> I'm the AWESOME modal! </h1>
        </div>
      </div>}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

#modal {
  display: block;
  position: fixed;
  padding-top: 50px;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0 ,0 ,0 , 0.5);
}

.modal-box {
  z-index: 50;
  margin: auto;
  width: 80%;
  height: 200px;
  background-color: white;
}

<script src=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>
<div id="root"></div>

I have this modal button and when I press it a modal shows up. I want it to be closed if click - outside - the modal-box, but now it regardless if i click outside or inside the modal-box the modal closes down. How to make the modal box close when pressed outside modal-box the react way?

https://codepen.io/anon/pen/MvVjOR

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      show: false
    }
  }
  openModal() {
    this.setState( prevState => (
    {show: !prevState.show}))
  }
  closeModal() {
    this.setState({show: false})
  }
  render() {
    return (
      <div>
      <button id='button' onClick={() => this.openModal()}>the modal button</button>
        {this.state.show && <div id='modal' onClick={() => this.closeModal()}>
        <div className="modal-box">
          <h1> I'm the AWESOME modal! </h1>
        </div>
      </div>}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

#modal {
  display: block;
  position: fixed;
  padding-top: 50px;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0 ,0 ,0 , 0.5);
}

.modal-box {
  z-index: 50;
  margin: auto;
  width: 80%;
  height: 200px;
  background-color: white;
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

• javascript
• reactjs

• 1 In theory, you only need one handler: toggleModal() { this.setState( prevState => ( {show: !prevState.show})) }. You could also make use of this lib: react-toolbox./#/ponents/dialog. They have great and easy to use ponents – Nocebo Commented Aug 20, 2017 at 11:25

1 Answer 1

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      show: false
    }
  }
  openModal() {
    this.setState( prevState => (
    {show: !prevState.show}))
  }
  closeModal(e) {
    if(e.target.id === "modal") {
      this.setState({show: false})
    }
  }
  render() {
    return (
      <div>
      <button id='button' onClick={() => this.openModal()}>the modal button</button>
        {this.state.show && <div id='modal' onClick={(e) => this.closeModal(e)}>
        <div className="modal-box">
          <h1> I'm the AWESOME modal! </h1>
        </div>
      </div>}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

Here's a demo - https://codepen.io/anon/pen/dzmpqv