The React Bootstrap dropdown menu is not closing instead gets rendered horizontally

Question

So I was using react-bootstrap dropdown menu and i found a bug that it doesn't close .It actually renders all its options horizontally on my screen.

I searched over Stackoverflow .There were few resembling posts but none of them is for react

        <DropdownButton
          title={this.state.selectedOption}
          id="document-type"
          onSelect={this.handleSelect.bind(this)}
        >
          {myoptions.map((opt, i) => (
            <Dropdown.Item key={i} eventKey={i}>
              {opt}
            </Dropdown.Item>
          ))}`enter code here`
        </DropdownButton>

I expected Nomral Behavior

Answer 1

As per docs,

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. Like overlays, Dropdowns are built using a third-party library Popper.js, which provides dynamic positioning and viewport detection.

Also you need to add bootstrap.css, either by adding link in index.html

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

or by importing in index.js file.

Add popper in index.html

<script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>

Demo