title: ReactJs Collapse toglles-off after being opened
body: <p>I'm trying to perform a collapsible element on my form. I am using react-bootstrap.</p>
  
  <p>The behaviour I expect is the following: once I click the button "click", comes the content placed in <code>&lt;Collapse /&gt;</code> and stays until I click the same button again.</p>
  
  <p>The behaviour I've got: once I click the button "click", a collapsed element appears and then vanishes.</p>
  
  <p>I've just copied the code from the documentation of react-bootstrap Collapse example (<a href="https://react-bootstrap.github.io/utilities/transitions/" rel="nofollow noreferrer">https://react-bootstrap.github.io/utilities/transitions/</a>). The example on their website works just fine. As I've noticed the styles, that are set to both examples (on my machine, and from the docs) are the same. So, why such happens and how to fix it?</p>
  
  <ul>
  <li><p><code>Index.cshtml</code>    </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Index&lt;/title&gt;
      &lt;link rel="stylesheet" href="~/dist/bundle.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;header&gt;
        &lt;nav class="navbar navbar-expand fixed-top dev"&gt;
          &lt;div&gt;Character bio&lt;/div&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
  
      &lt;main role="main" class="container mt-5"&gt;
  
        &lt;div id="content" class="row text-center mt-5"&gt;
  
        &lt;/div&gt;
  
        &lt;div class="row text-center mt-5 mb-3"&gt;
          &lt;div class="col"&gt;
            &lt;p className="text-muted"&gt;© 2018&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/main&gt;
  
      &lt;script src="~/dist/bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre></li>
  <li><p><code>app.jsx</code></p>
  
  <pre><code>import "bootstrap/dist/css/bootstrap.min.css";
  import "../css/common.css";
  
  import { library } from "@fortawesome/fontawesome-svg-core";
  import { faDice } from "@fortawesome/free-solid-svg-icons";
  import { faHighlighter } from "@fortawesome/free-solid-svg-icons";
  
  import React from "react";
  import ReactDOM from "react-dom";
  import Routes from "./routing/routes.jsx";
  import { BrowserRouter, Link } from "react-router-dom";
  
  import { Button, Collapse, Well } from "react-bootstrap";
  
  
  library.add(
    faDice,
    faHighlighter
  );
  
  class Example extends React.Component {
    constructor(props, context) {
      super(props, context);
  
      this.state = {
        open: false
      };
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Button onClick={() =&gt; this.setState({ open: !this.state.open })}&gt;
            click
          &lt;/Button&gt;
          &lt;Collapse in={this.state.open}&gt;
            &lt;div&gt;
              &lt;Well&gt;
                Anim pariatur cliche reprehenderit, enim eiusmod high life
                accusamus terry richardson ad squid. Nihil anim keffiyeh
                helvetica, craft beer labore wes anderson cred nesciunt sapiente
                ea proident.
              &lt;/Well&gt;
            &lt;/div&gt;
          &lt;/Collapse&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;Example /&gt;,
    document.getElementById("content")
  )
  
  module.hot.accept();
  </code></pre></li>
  <li><p>the gif of what happening: <a href="https://dropmefiles.com/C7NPU" rel="nofollow noreferrer">https://dropmefiles.com/C7NPU</a> (sorry for link, gif is bigger than 2 Mb)</p></li>
  </ul>
  
  <p>P.S. I've googled the problem and found nothing (i.e. links from stackoverflow are not working).</p>