React-bootstrap dropdown select option example; In this tutorial, you will learn how to implement bootstrap select dropdown with option in react js app.
Sometimes, you create a select dropdown with your forms in any react js app. And want to add a select dropdown field in the form in react js app. So, this tutorial will guide you step by step on how to implement bootstrap-select dropdown with an option in react js app using the bootstrap-select dropdown.
React Bootstrap Dropdown Select Example
Just follow the following steps and how to implement bootstrap select dropdown with option in react js app:
- Step 1 – Create React App
- Step 2 – Install Bootstrap 4
- Step 3 – Create Select Dropdown Component
- Step 4 – Add Component in App.js
Step 1 – Create React App
In this step, open your terminal and execute the following command on your terminal to create a new react app:
npx create-react-app my-react-app
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install Bootstrap 4
In this step, execute the following command to install boostrap 4 library into your react app:
npm install bootstrap --save
Add bootstrap.min.css file in src/App.js file:
import React, { Component } from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<h2>How to Create Select Dropdown in React</h2>
</div>
);
}
export default App;
Step 3 – Create Select Dropdown Component
In this step, visit src directory of your react js app and create form component named SelectComponent.js. And add the following code into it:
import React from 'react'
class SelectComponent 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 SelectComponent;
Step 4 – Add Component in App.js
In this step, you need to add SelectComponent.js file in src/App.js file:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import SelectComponent from './SelectComponent'
function App() {
return (
<div className="App">
<SelectComponent />
</div>
);
}
export default App;
Conclusion
React js Select Dropdown example; In this example tutorial, you have learned from scratch how to implement select dropdown with an option in react application.
