Reactjs - can't get dropdown menu to format correctly

Question

I'm trying to create a dropdown menu on my react project, but I'm having some trouble getting it formatted the way I want it. This is the project I'm trying to emulate:

https://stackblitz.com/edit/reactstrap-v6-lgz4y2?file=Example.js

And this is my current project:

https://codesandbox.io/s/relaxed-ellis-lp9mb

Code:

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
    this.state = {
      dropdownOpen: false
    };
  }

  toggle() {
    this.setState(prevState => ({
      dropdownOpen: !prevState.dropdownOpen
    }));
  }

  onMouseEnter() {
    this.setState({ dropdownOpen: true });
  }

  onMouseLeave() {
    this.setState({ dropdownOpen: false });
  }

  render() {
    return (
      <Dropdown
        className="d-inline-block"
        onMouseOver={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}
        isOpen={this.state.dropdownOpen}
        toggle={this.toggle}
      >
        <DropdownToggle caret>Dropdown</DropdownToggle>
        <DropdownMenu>
          <DropdownItem header>Header</DropdownItem>
          <DropdownItem disabled>Action</DropdownItem>
          <DropdownItem>Another Action</DropdownItem>
          <DropdownItem divider />
          <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
     </Dropdown>
    );
  }
}  

Not sure what I'm doing wrong, but all help is welcomed!

Answer 1

That's because reactstrap depends on bootstrap css. You have not included that css. You will have to install bootstrap and then add this import

import "bootstrap/dist/css/bootstrap.min.css";

Here's your example with correct formatting -

https://codesandbox.io/s/nervous-shockley-hvp0l