React Bootstrap Dropdown Component Example

React bootstrap is a component-based library that provides bootstrap features as react component, We will use a Dropdown component to display a list or menu. in this example, we will be displaying the list of countries and get the selected dropdown item value

You can download the working example of a react dropzone in the ReactJS Tutorial https://github.com/technostuf/reactjs-bootstrap-dropdown

Create a React application
Install react-dropzone library
Add code to the file
Run a React application
Add Styling & Image Preview

Create a React application

Create a React app using the below command

 npx create-react-app reactjs-bootstrap-dropdown

After running the above command system will create a new folder “reactjs-bootstrap-dropdown” so you need to move into that folder, use the below command to change the directory.

 cd reactjs-bootstrap-dropdown

Install react-bootstrap library

After creating react app we need to install react-bootstrap and bootstrap from npm or yarn

 npm install --save react-bootstrap bootstrap
 OR using yarn
 yarn add react-bootstrap bootstrap

Add code to the file

Create a component file to hold dropzone code separate from another component and put the below code into that file. This is not necessary but I have created separate components to make our code clean and readable

import React, { useState } from "react";
import 'bootstrap/dist/css/bootstrap.css';
import Dropdown from 'react-bootstrap/Dropdown';

const DropDownComponent = (props) => {
    const [value, setValue] = useState("United states");
    const handleSelect = (e) => {
        console.log(e);
        setValue(e)
    }
    return (
        <div>
            <h1>React-Bootstrap Dropdown Component - technostuf.com</h1>
            <Dropdown onSelect={handleSelect}>
                <Dropdown.Toggle variant="success">
                    {value}
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    <Dropdown.Item eventKey="United states">
                        United states
                    </Dropdown.Item>
                    <Dropdown.Item eventKey="Canada">
                        Canada
                    </Dropdown.Item>
                    <Dropdown.Item eventKey="Japan">
                        Japan
                    </Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
            <h4>Selected Country {value}</h4>
        </div>
    );
}

export default DropDownComponent;

After adding a code, you have to call this component file into your code, in my case I am adding it to App.js

import './App.css';
import DropDownComponent from './DropDownComponent';
function App() {
  return (
    <div className="App">
      <DropDownComponent />
    </div>
  );
}
export default App;

React bootstrap dropdown get selected value

React bootstrap dropdown provides a callback event, fires when the user selects an item from the dropdown, onSelect event fires when the item is selected. in the above code, I have called handleSelected function to get the selected dropdown value and set the selected values to state so we can use them later

Run a React application

Run the React application using the following command

 npm start

After compilation, the program opens your browser and runs http://localhost:3000/

Output

You can download the working example of a react dropzone example

https://github.com/technostuf/reactjs-bootstrap-dropdown