Hi there,

you can connect the active prop with the state, for example like this:

import React, { Component } from "react";
import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdbreact";

class DropdownPage extends Component {

  state = {
    value: ""
  }

  onClickHandler = event => {
    const value = event.target.innerHTML;
    this.setState({ value })
  }

  render() {
    return (
      <>
        <p>Value: {this.state.value}</p>
        <MDBDropdown>
          <MDBDropdownToggle caret color="primary">
            MDBDropdown
          </MDBDropdownToggle>
          <MDBDropdownMenu basic>
            <MDBDropdownItem active={this.state.value === "Action"} onClick={this.onClickHandler}>Action</MDBDropdownItem>
            <MDBDropdownItem active={this.state.value === "Another Action"} onClick={this.onClickHandler}>Another Action</MDBDropdownItem>
            <MDBDropdownItem active={this.state.value === "Something else here"} onClick={this.onClickHandler}>Something else here</MDBDropdownItem>
            <MDBDropdownItem divider />
            <MDBDropdownItem active={this.state.value === "Separated link"} onClick={this.onClickHandler}>Separated link</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </>
    );
  }
}

export default DropdownPage;

---

Hi fola,

you can attach a regular onClick event listener to the MDBDropdownItem

import React, { Component } from "react";
import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdbreact";

class DropdownPage extends Component {

  state = {
    value: ""
  }

  onClickHandler = event => {
    const value = event.target.innerHTML;
    this.setState({ value })
  }

  render() {
    return (
      <>
        <p>Value: {this.state.value}</p>
        <MDBDropdown>
          <MDBDropdownToggle caret color="primary">
            MDBDropdown
      </MDBDropdownToggle>
          <MDBDropdownMenu basic>
            <MDBDropdownItem onClick={this.onClickHandler}>Action</MDBDropdownItem>
            <MDBDropdownItem onClick={this.onClickHandler}>Another Action</MDBDropdownItem>
            <MDBDropdownItem onClick={this.onClickHandler}>Something else here</MDBDropdownItem>
            <MDBDropdownItem divider />
            <MDBDropdownItem onClick={this.onClickHandler}>Separated link</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </>
    );
  }
}

export default DropdownPage;

---

Hi there, As of now, the Dropdown component does not emit any event. For "customizability"'s sake the DropdownItem take in an onClick function prop to have the users design the kind of output they want from clicking it. We also understand that a slightly more holistic approach might be needed for some cases, so we are totally open for feedback. Please @everyone let me know what do you think would be best kind of clicking event handling for the component and we will try to implement it! With Best Regards, Kuba

---