Reactstrap dropdown without a select or button

Question

I am trying to build a menu. Something like below:

I plan to use a simple dropdown menu of bootstrap. However I am not sure how to do it. I have following in my class function render method:

<td style={{ width: 20, cursor: "pointer" }}>
  <Dropdown
    toggle={this.toggleMenu}
    isOpen={this.state.dropdownOpen}
  >
    <div>&bull;&bull;&bull;</div>
    <DropdownMenu>
      <DropdownItem>10</DropdownItem>
      <DropdownItem>25</DropdownItem>
      <DropdownItem>50</DropdownItem>
      <DropdownItem>100</DropdownItem>
    </DropdownMenu>
  </Dropdown>
</td>

And I have following events/variables:

  constructor(props) {
    super(props);

    this.toggleMenu = this.toggleMenu.bind(this);
    this.state = {
      collapse: false,
      fadeIn: true,
      timeout: 300,
      dropdownOpen: false,
      debug: ""
    };
  }

  toggleMenu(e) {
    alert("sds");
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }

I dont get any errors and toggleMenu is never called. Am I missing something here?

If I use DropDownToggle it adds a button:

Answer 1

Instead of

<div>&bull;&bull;&bull;</div>

try using the DropdownToggle component together with the 'tag' property like this:

<DropdownToggle tag="text">&bull;&bull;&bull;</DropdownToggle>