How customize reactstrap dropdown in reactJS

Question

Created sample application with ReactJS and install reactstrap for boostrap. I use dropdown components in application that is working fine. code is

<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
    <DropdownToggle caret>
      Dropdown
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem>Another Action</DropdownItem>
      <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown> 

but i have to change .

Like currently they passing text only

. But

I have to pass 3 things like icon,heading and sub heading

so can I change DropdownItem.js code for this type of customization ?

I have to make dropdown similar to this image http://prntscr.com/f34zoo

Thanks in advance

Answer 1

It is possible to have custom menu items:

As it is specified on the official website:

<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
   <span
      onClick={this.toggle}
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded={this.state.dropdownOpen}
      >
   Custom Dropdown Content
   </span>
   <DropdownMenu>
      <div onClick={this.toggle}>
          <i class="some-icon"/>
          <h3>Some heading</h3>
          <p>Some sub heading</p>
      </div>
      <div onClick={this.toggle}>
          <i class="some-icon"/>
          <h3>Some heading</h3>
          <p>Some sub heading</p>
      </div>
      <div onClick={this.toggle}>
          <i class="some-icon"/>
          <h3>Some heading</h3>
          <p>Some sub heading</p>
      </div>
   </DropdownMenu>
</Dropdown>