React-bootstrap dropdown select option example; In this tutorial, i will discuss on how to integrate bootstrap select dropdown with option in react js app.
Bootstrap Dropdowns. Dropdown menus are toggleable, contextual menus, used for displaying links in a list format. It facilitates users to choose one value from a predefined list. This can be made interactive with the dropdown JavaScript plugin. You have to wrap dropdown menu within the class .
React bootstrap select dropdown with option example; i want to add a select dropdown field in the form in react js app. So, this tutorial, i will implement bootstrap-select dropdown with an option in react js app using the bootstrap library.
React Bootstrap Dropdown Select Option Example
- Step 1 – Create React App
- Step 2 – Install React-Bootstrap
- Step 3 – Create Select Dropdown Component
- Step 4 – Import Select Dropdown 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 React-Bootstrap
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
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 – Import Select Dropdown Component in App.js
Import 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 integrate select dropdown with an option in react application.
Recommended React Tutorials
- How To Install React App On Windows 10
- React Axios – Make HTTP GET Requests Example
- React Axios – Make HTTP POST Requests Example
- React Get Form Values On Submit Tutorial
- React Tutorial – How To Use Font Awesome 5 in React
- React 17 Axios File Upload Example
- React js Get Multiple Checkbox Value On Submit
- How to Get Current Date and Time in React Apps
- React 17 Hide Show Toggle Tutorial
- React Bootstrap Modal – Implement Bootstrap Modal Ex