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, Vue JS, Angular JS, React Js, WordPress, 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 *