title: react-bootstrap-modal not showing
body: <p>I am trying to render a Bootstrap modal when a button is clicked within my React app. The code for my React app is as followed.</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import { Grid, Row, Col, Button, Table } from 'react-bootstrap';
  import Modal from 'react-bootstrap-modal';
  
  import 'bootstrap/dist/css/bootstrap.css';
  
  class Dashboard extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              show: false
          };
  
          this.showModal = this.showModal.bind(this);
      }
  
      showModal() {
          this.setState({
              show: true
          });
      }
  
      render() {    
          return (
              &lt;Grid&gt;
                  &lt;Row&gt;
                      &lt;Col md={12}&gt;
                          &lt;Button bsStyle="success" className='btn-block' onClick={this.showModal}&gt;Create&lt;/Button&gt;
  
                          &lt;Modal show={this.state.show} aria-labelledby='ModalHeader'&gt;
                              &lt;Modal.Header closeButton&gt;
                                  &lt;Modal.Title id='ModalHeader'&gt;A Title Goes here&lt;/Modal.Title&gt;
                              &lt;/Modal.Header&gt;
                              &lt;Modal.Body&gt;
                                  &lt;p&gt;Some Content here&lt;/p&gt;
                              &lt;/Modal.Body&gt;
                              &lt;Modal.Footer&gt;
                                  &lt;Modal.Dismiss className='btn btn-default'&gt;Cancel&lt;/Modal.Dismiss&gt;
                                      &lt;button className='btn btn-primary'&gt;
                                          Save
                                      &lt;/button&gt;
                              &lt;/Modal.Footer&gt;
                          &lt;/Modal&gt;
  
                      &lt;/Col&gt;
                  &lt;/Row&gt;
  
              &lt;/Grid&gt;
          );
      }
  }
  
  export default Dashboard;
  </code></pre>
  
  <p>When I click the button to change the state so the modal will open. The button is no longer clickable. I have inspected the html code in the web browser console. The modal is definitely inserted into the dom but it is not being shown. I am struggling to workout why it is not working correctly. There may be some CSS property that is preventing it from working or I have included something.</p>
  
  <p>The HTML for the page when the button is clicked.</p>
  
  <pre><code>&lt;html lang="en"&gt;&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
      &lt;!--
        manifest.json provides metadata used when your web app is added to the
        homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
      --&gt;
      &lt;link rel="manifest" href="/manifest.json"&gt;
      &lt;link rel="shortcut icon" href="/favicon.ico"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"&gt;
      &lt;!--
        Notice the use of  in the tags above.
        It will be replaced with the URL of the `public` folder during the build.
        Only files inside the `public` folder can be referenced from the HTML.
  
        Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.
      --&gt;
      &lt;title&gt;React App&lt;/title&gt;
    &lt;style type="text/css"&gt;body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  &lt;/style&gt;&lt;style type="text/css"&gt;.App {
    text-align: center;
  }
  
  .App-logo {
    -webkit-animation: App-logo-spin infinite 20s linear;
            animation: App-logo-spin infinite 20s linear;
    height: 80px;
  }
  
  .App-header {
    background-color: #222;
    height: 150px;
    padding: 20px;
    color: white;
  }
  
  .App-title {
    font-size: 1.5em;
  }
  
  .App-intro {
    font-size: large;
  }
  
  @-webkit-keyframes App-logo-spin {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  }
  
  @keyframes App-logo-spin {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  }
  &lt;/style&gt;&lt;/head&gt;
    &lt;body class="modal-open" style="overflow: hidden;"&gt;
      &lt;div id="root" aria-hidden="true"&gt;&lt;div&gt;&lt;div class="container"&gt;&lt;div class="row"&gt;&lt;div class="col-md-2"&gt;&lt;button id="stadiums" type="button" class="btn-block btn btn-default"&gt;Stadiums&lt;/button&gt;&lt;/div&gt;&lt;div class="col-md-2"&gt;&lt;button id="teams" type="button" class="btn-block btn btn-default"&gt;Teams&lt;/button&gt;&lt;/div&gt;&lt;div class="col-md-2"&gt;&lt;button id="matches" type="button" class="btn-block btn btn-default"&gt;Matches&lt;/button&gt;&lt;/div&gt;&lt;div class="col-md-2"&gt;&lt;button id="tickets" type="button" class="btn-block btn btn-default"&gt;Tickets&lt;/button&gt;&lt;/div&gt;&lt;div class="col-md-2"&gt;&lt;button id="users" type="button" class="btn-block btn btn-default"&gt;Users&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-md-12"&gt;&lt;button type="button" class="btn-block btn btn-success"&gt;Create&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;form class="form-horizontal"&gt;&lt;div class="form-group"&gt;&lt;label for="formHorizontalEmail" class="col-sm-2 control-label"&gt;Email&lt;/label&gt;&lt;div class="col-sm-10"&gt;&lt;input type="email" placeholder="Email" id="formHorizontalEmail" class="form-control"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
  
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the &lt;body&gt; tag.
  
        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
      --&gt;
    &lt;script type="text/javascript" src="/static/js/bundle.js"&gt;&lt;/script&gt;
  
  &lt;div role="dialog"&gt;&lt;div class="modal-backdrop fade in" style="z-index: 1040;"&gt;&lt;/div&gt;&lt;div aria-labelledby="ModalHeader" class="modal fade in" role="document" tabindex="-1" style="z-index: 1050;"&gt;&lt;div class="modal-dialog"&gt;&lt;div class="modal-content"&gt;&lt;div class="modal-header"&gt;&lt;button class="close" aria-label="Close Modal"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;&lt;h4 id="ModalHeader" class="modal-title"&gt;A Title Goes here&lt;/h4&gt;&lt;/div&gt;&lt;div class="modal-body"&gt;&lt;p&gt;Some Content here&lt;/p&gt;&lt;/div&gt;&lt;div class="modal-footer"&gt;&lt;button class="btn btn-default"&gt;Cancel&lt;/button&gt;&lt;button class="btn btn-primary"&gt;Save&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>