How to handle selection in reactstrap drop down list

Question

I have to store the cartype value by selecting drop down button

<Dropdown  direction="down" isOpen={this.state.dropdownOpen} toggle={this.toggle} >
    <DropdownToggle caret outline color="info">
                    Select your Vehicle Type 
    </DropdownToggle>
    <DropdownMenu onChange={this.handleChange} name="carType" >
    <DropdownItem name="classic">Classic</DropdownItem>
    <DropdownItem name="deluxe">Deluxe</DropdownItem>
    <DropdownItem name="luxury">Luxury</DropdownItem>
    <DropdownItem name="superLuxury">Super Luxury</DropdownItem>
    <DropdownItem name="limousine">Limousine</DropdownItem>
    <DropdownItem name="exo">Exotic Cars</DropdownItem>
</DropdownMenu>

my onChange function is

handleChange = event => {
    this.setState({ 
        [event.target.name]: event.target.value
    });
};

I could't get a value when I select dropdown button. please give a hint to store the value into database

Answer 1

To get the value of your dropdown with react strap:

<Dropdown  direction="down" isOpen={this.state.dropdownOpen} toggle={this.toggle} >
    <DropdownToggle caret outline color="info">
                    Select your Vehicle Type 
    </DropdownToggle>
    <DropdownMenu name="carType" >
    <DropdownItem name="classic" value="classic" onClick={this.handleChange} >Classic</DropdownItem>
    <DropdownItem name="deluxe" value="deluxe" onClick={this.handleChange} >Deluxe</DropdownItem>
</DropdownMenu>

Changes made:

• 1. onClick is used not onChange.
  2. handleClick is reading the actual option clicked so it is on DropdownItem.
  3. You are asking for event.target.value but you did not have a "value" so I added it. If you wanted to use the text from the DropdownItem you would use event.target.innerText