React-Bootstrap Select Dropdown Example Tutorial

React-Bootstrap Select Dropdown Example Tutorial

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.

Recommended React JS Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *