How to set selected item in reactstrap Dropdown?
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")
};
this.setState(newState);
if (!!this.props.onChange) {
this.props.onChange(newState.dropDownValue);
}
}
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}
</DropdownToggle>
<DropdownMenu>
<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>
</DropdownMenu>
</Dropdown>
}
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>
{this.state.dropDownValue}
</DropdownToggle>
<DropdownItem>
<div onClick={this.changeValue}>Another Action</div>
</DropdownItem>
Of course, don't forget to init it and bind the function for your this to work.