Source:  Twitter logo

How to set selected item in reactstrap Dropdown?

There is example of dropdown:

When I select item in dropdown, it is not displayed.

*******************Working solution*****************************

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

class BootstrapSelect extends React.Component {

    constructor(props) {

        this.toggle = this.toggle.bind(this);
        this.changeValue = this.changeValue.bind(this);
        this.state = {
            actions: [],
            dropDownValue: 'Select action',
            dropdownOpen: false

    toggle(event) {

            dropdownOpen: !this.state.dropdownOpen

    changeValue(e) {
        this.setState({dropDownValue: e.currentTarget.textContent});
        let id = e.currentTarget.getAttribute("id");

    componentDidMount() {
            .type('application/json; charset=utf-8')
            .end(function (err, res) {
                this.setState({actions: res.body});


    render() {
        return (
            <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                <DropdownToggle caret>
                    { => {
                        return <DropdownItem id={} key={} onClick={this.changeValue}>{}</DropdownItem>



export default BootstrapSelect;

Add an onclick on your DropDownItem (inside a div ?) to change your state. Set a "dropDownValue" from your click event. In your dropDownToggle, get your state.dropDownValue.

Something like this :

changeValue(e) {
  this.setState({dropDownValue: e.currentTarget.textContent})

<DropdownToggle caret>
    <div onClick={this.changeValue}>Another Action</div>

Of course, don't forget to init it and bind the function for your this to work.

29 users liked answer #0dislike answer #029
Nevosis profile pic

Similar to @Nevosis solution, you can add a value attribute and get it afterwards on the "onChange" event:

    onDropdownItem_Click = (sender) => {
    var icon = sender.currentTarget.querySelector("i");
    var newState = {
      dropDownValue: sender.currentTarget.getAttribute("dropdownvalue"),
      dropDownIcon: !!icon && icon.getAttribute("class")

    if (!!this.props.onChange) {

  render = () => (
    <Dropdown isOpen={this.state.dropDownOpen} toggle={this.toggle} className={'ticket-module-selector ' + this.props.className}>
      <DropdownToggle color={this.props.color} caret>
        <i className={this.state.dropDownIcon}></i>{this.state.dropDownValue}
        <DropdownItem onClick={this.onDropdownItem_Click} dropDownValue="Allotments"><i className="fa fa-plane fa-fw"></i>Allotments</DropdownItem>
        <DropdownItem onClick={this.onDropdownItem_Click} dropDownValue="GeoAMS"><i className="fa fa-envelope fa-fw"></i>GeoAMS</DropdownItem>
        <DropdownItem onClick={this.onDropdownItem_Click} dropDownValue="QIS"><i className="fa fa-money fa-fw"></i>BSP</DropdownItem>
        <DropdownItem onClick={this.onDropdownItem_Click} dropDownValue="QIS"><i className="fa fa-clock-o fa-fw"></i>QIS</DropdownItem>
        <DropdownItem onClick={this.onDropdownItem_Click} dropDownValue="NO_SHOW"><i className="fa fa-car fa-fw"></i>NO SHOW</DropdownItem>
3 users liked answer #1dislike answer #13
Héctor Espí Hernández profile pic
Héctor Espí Hernández

Here is a complete example of working code probably this will help you. use import:

import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle, Dropdown } from "reactstrap"


state = {
   currency: '',
   dropDownOpen: '',

toggle = () => {
       dropDownOpen: !this.state.dropDownOpen,

handleChange = (code) => {
        currency: code


    <ButtonDropdown >
        <Dropdown isOpen={this.state.dropDownOpen} toggle={this.toggle} >
            <DropdownToggle color="primary" caret className="dropdown-toggle">
                Select Currency
            <DropdownMenu className="currency-dropdown">
                    <DropdownItem onClick={() => this.handleChange(USD)} dropDownValue="USD">USD</DropdownItem>
                    <DropdownItem onClick={() => this.handleChange(EUR)} dropDownValue="EUR">EUR</DropdownItem>
                    <DropdownItem onClick={() => this.handleChange(INR)} dropDownValue="INR">INR</DropdownItem>
                    <DropdownItem onClick={() => this.handleChange(AFT)} dropDownValue="AFT">AFT</DropdownItem>

You can update CSS:

.dropdown-toggle {
    margin-top: 36px;
    min-width: 300px;
    background-color: white;
    color: darkslategrey;

.currency-dropdown {
    max-height: 350px;
    overflow-y: scroll;
    min-width: 300px;


When you use {this.state.currency} you will get selected value

3 users liked answer #2dislike answer #23
Abhishek profile pic

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).