title: How to use multiple modal in the same page?
body: <pre><code>class dashboard extends Component {
    constructor(props) {
      super(props);
      this.state = {
        show: false,
        msg: false
      }
    }
    handelModal1() {
      this.setState({ show: !this.state.show })
    }
    handelModal2() {
      this.setState({ msg: !this.state.msg })
    }
  
    render() {
      return (
      &lt;div&gt;
        &lt;&gt;
          &lt;Button variant=&quot;primary&quot; onClick={() =&gt; { this.handelModal1() }} 
            one
          &lt;/Button&gt;
  
          &lt;Modal show={this.state.show} &gt;
            &lt;Modal.Header&gt;
              &lt;Modal.Title&gt;Modal one&lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body&gt; hello &lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
              &lt;Button onClick={() =&gt; { this.handelModal1() }}&gt;
                OK
             &lt;/Button&gt;
            &lt;/Modal.Footer&gt;
          &lt;/Modal&gt;
        &lt;/&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;&gt;
          &lt;Button variant=&quot;primary&quot; onClick={() =&gt; { this.handelModal2() }}
            two
          &lt;/Button&gt;
  
          &lt;Modal msg={this.state.msg} &gt;
            &lt;Modal.Header&gt;
              &lt;Modal.Title&gt;Modal two&lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body&gt; hello &lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
              &lt;Button onClick={() =&gt; { this.handelModal2() }}&gt;
                OK
              &lt;/Button&gt;
            &lt;/Modal.Footer&gt;
          &lt;/Modal&gt;
        &lt;/&gt;
     &lt;/div&gt;
    )
  }
  </code></pre>
  <p>I am trying to use two modals on the same page.
  The first modal is working and I'm getting the pop-up, but the second modal is now working.
  There is no pop up when I click on the second modal. Is there any simple way to use two modals on the same page???</p>