React-Bootstrap Select Dropdown Example Tutorial

In this tutorial, you will learn how to create select dropdown with option in react js application using react-bootstrap library.

How to Create and Use Bootstrap Dropdown Select In React Js

Steps to implement the bootstrap-select dropdown with option:

Step 1 – Create React App

In this step, open your cmd and run the following command 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 and Set up Bootstrap

In this step, run the following command to install bootstrap library into your react app:

npm install bootstrap --save

Set Up 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

To create a dropdown component Dropdown.js file in src directory:

import React from 'react';
import { Dropdown } from 'react-bootstrap';
function DropdownComponent() {
  return (
    <Dropdown>
      <Dropdown.Toggle variant="success" id="dropdown-basic">
        Dropdown Button
      </Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1">Action 1</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Action 2</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Action 3</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}
export default DropdownComponent;

Step 4 – Import the Dropdown Component

Import dropdown component in app.js file:

import React from 'react';
import DropdownComponent from './Dropdown';
function App() {
  return (
    <div className="App">
      <DropdownComponent />
    </div>
  );
}
export default App;

Conclusion

In this tutorial, you learned how to create a dropdown using Bootstrap in React.

Recommended React JS Posts