React Bootstrap Select Dropdown Example

React.js

Nicesnippets

10973

12-03-2020


Hello Guys,

This simple article demonstrates of react select dropdown example. This article goes in detailed on react select dropdown onchange. In this article, we will implement a react bootstrap select dropdown example. this example will help you react select custom dropdown.

If you are new in react js then we are provide react select box example. in this example we are save dropdown value in state. select box onchange event save data in state.

/src/SelectBox.js file

import React from 'react'

class SelectBox extends React.Component{

constructor(){

super();

this.state = {

city:null,

}

this.handleInputChange = this.handleInputChange.bind(this);

}

handleInputChange(event) {

this.setState({

city: event.target.value

});

}

submit(){

console.warn(this.state)

}

render(){

return(

<div>

<div className="row">

<div className="col-md-6 offset-md-3">

<h3>Bootstrap Select Box</h3><br />

<div className="form-row">

<div className="form-group col-md-6">

<label>City :</label>

<select className="form-control" name="city" onChange={this.handleInputChange}>

<option selected>Select City</option>

<option value="1">city 1</option>

<option value="2">city 2</option>

<option value="3">city 3</option>

</select>

</div>

</div>

<div className="form-row">

<div className="col-md-12 text-center">

<button type="submit" className="btn btn-primary" onClick={()=>this.submit()}>Submit</button>

</div>

</div>

</div>

</div>

</div>

)

}

}

export default SelectBox;

I hope it can help you...


Recommended Posts