React's DOM handling ability, when intertwined with a useful UI, is always pleasing for end users. Courtesy of a large number of open-source packages, React developers can now easily integrate any UI/UX library like Bootstrap (one of the most popular CSS frameworks) with a single-page React app. As an improvisation, Bootstrap's component-based library is more preferred while working with these frontend frameworks. Attributed to its component architecture, every UI component is taken up as a React component itself. Every UI component, such as forms, inputs, tooltips, dropdowns, modals, etc., are all separate React based components in React Bootstrap. This guide will show you how to use React Bootstrap to build a dropdown list for your forms and capture their values on the front end.
Just like the onChange
event watches for changes in an input field, the onSelect
event occurs after some value is selected in an element. A dropdown list can be drawn closer to a regular input field since, under the shell, they both aim to get some value from the user. To listen to those selected values when the user dynamically changes them, the onSelect
event comes in handy.
After the onSelect
event has been set to watch for a selection of value, the next step is to store that dynamic data somewhere. To do so, an event handler
or a simple JavaScript function is invoked every time the event is triggered, and the data is extracted using the event object
. In this case, it becomes even simpler using props.
Make sure you have Nodejs and npm installed in your machine (at least version 8 or higher) along with a code editor and a web browser (preferably Chrome or Firefox).
Create a new project using create-react-app:
1npx create-react-app react-bootstrap-dropdown
Inside the root directory, run the following command to install the React Bootstrap library.
1npm install react-bootstrap bootstrap
This will install both Bootstrap and React Bootstrap inside the project.
Typically, a separate form component should handle everything, but for brevity purposes, let's put all the code inside App.js
. Remove the logo, App.css, and all their imports from App.js
. Clean out the starter template inside the app component. Your App.js
should look like
this:
1import React from 'react';
2
3function App() {
4 return (
5 <div className="App">
6 <h2>Hello</h2>
7 </div>
8 );
9}
10
11export default App;
For regular Bootstrap styles to work correctly, import the Bootstrap styles on top:
1import 'bootstrap/dist/css/bootstrap.min.css';
The above is equivalent to adding Bootstrap CDN in your index.html
file. Now import the DropdownButton and Dropdown from react-bootstrap
:
1import DropdownButton from 'react-bootstrap/DropdownButton';
2import Dropdown from 'react-bootstrap/Dropdown'
Render them on the DOM inside App.js
:
1....
2 <DropdownButton
3 alignRight
4 title="Dropdown right"
5 id="dropdown-menu-align-right"
6
7 >
8 <Dropdown.Item eventKey="option-1">option-1</Dropdown.Item>
9 <Dropdown.Item eventKey="option-2">option-2</Dropdown.Item>
10 <Dropdown.Item eventKey="option-3">option 3</Dropdown.Item>
11 <Dropdown.Divider />
12 <Dropdown.Item eventKey="some link">some link</Dropdown.Item>
13 </DropdownButton>
14....
To see the UI inside the root directory, run:
1npm start
This will spin up a local development server (usually on port 3000) and you can see the dropdown button along with the dropdown fields.
Next, attach a handleSelect
function that fires when the onSelect
function is triggered. Place this event as a prop
inside the DropdownButton
component and create a handleSelect
function, which takes in the event object and logs it to the console.
1 ....
2 const handleSelect=(e)=>{
3 console.log(e);
4 }
5 ....
6 <DropdownButton
7 alignRight
8 title="Dropdown right"
9 id="dropdown-menu-align-right"
10 onSelect={handleSelect}
11 >
12 ....
Click on the fields to see their values appear on the console. Great! You have successfully captured the value of a dropdown list in a React Boostrap Dropdown component.
For a more practical use case, you might want to do something with this captured value. Your component n the front end should store it somewhere so that it can be sent to the database or some back end. Set up a state for the app component and store the selected value from the dropdown in the state variable. To avoid changing already existing code, use hooks for storing stateful data in a functional component.
1import React,{useState} from 'react';
2....
3
4
5function App() {
6 const [value,setValue]=useState('');
7 const handleSelect=(e)=>{
8 console.log(e);
9 setValue(e)
10 }
11
12 return (
13 ...
14 <h4>You selected {value}</h4>
15 </div>
16 );
17}
18
19export default App;
value
is a state variable, and setValue
is the asynchronous function that sets this state variable. To achieve this, import the useState
hook from React. Call setValue
inside the handleSelect
function to set the state variable to the value selected from the dropdown. Finally, output the current state value on the DOM inside your JSX.
Try selecting another value and notice how the DOM responds to the state changes to dynamically show the selected value.
Finally, your App.js
should look like
this:
1import React,{useState} from 'react';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import DropdownButton from 'react-bootstrap/DropdownButton';
4import Dropdown from 'react-bootstrap/Dropdown'
5
6
7function App() {
8 const [value,setValue]=useState('');
9 const handleSelect=(e)=>{
10 console.log(e);
11 setValue(e)
12 }
13 return (
14 <div className="App container">
15
16 <DropdownButton
17 alignRight
18 title="Dropdown right"
19 id="dropdown-menu-align-right"
20 onSelect={handleSelect}
21 >
22 <Dropdown.Item eventKey="option-1">option-1</Dropdown.Item>
23 <Dropdown.Item eventKey="option-2">option-2</Dropdown.Item>
24 <Dropdown.Item eventKey="option-3">option 3</Dropdown.Item>
25 <Dropdown.Divider />
26 <Dropdown.Item eventKey="some link">some link</Dropdown.Item>
27 </DropdownButton>
28 <h4>You selected {value}</h4>
29 </div>
30 );
31}
32
33export default App;
In case you get any depreciated warnings or errors you can use the exact version of React-Bootstrap used in this guide by updating your package.json
file and running the command npm i
:
1....
2"bootstrap": "^4.4.1",
3"react-bootstrap": "^1.0.1",
4....
For novice developers, component-based libraries often seem daunting and intimidating, but in practical use cases they enhance readability and reduce unnecessary lines of code. Controlled form components can be built conveniently using React-Bootstrap, especially when form fields require validations or have to be sent to a database on submitting them. Also, using UI components in your app will definitely help you code your features faster because the built-in components handle a lot of typical JavaScript under the hood using props.
Explore these React courses from Pluralsight to continue learning: