Implement dropdown in ReactJS
Today we will show you how to implement dropdown in ReactJS. We will use the npm package to implement dropdown. Start from scratch and later on show you more features related to dropdown.
Building a custom dropdown menu component for React, Create a Dropdown Menu using ReactJS, react js dropdown selected value, how to make a drop down list in react, react bootstrap dropdown button, bind dropdown in react js, Create a Dropdown in React that Closes When the Body is Clicked, How to get selected value of a dropdown menu in ReactJS.
Checkout more articles on ReactJS
Way to implement dropdown in ReactJS
1. Create react application
Let’s start by creating a simple react application with the help of the create-react-app. If you don’t know how to create a react application then refer to the link below.
Create React Application2. Install npm dropdown package
In order to implement dropdown, we need to install react-select npm package in the project. Use the below command to install it.
1 | npm i react-select |
3. Implement the dropdown
First, start with the design where we will use the react-select npm package for dropdown and variable to store/display selected option.
Following attributes are used to implement the dropdown.
- placeholder – Display the placeholder in dropdown
- value – Display selected value of the dropdown
- options – Pass the list of data to display records in dropdown menu items.
- onChange – Assign the onChange event of the dropdown to get the selected value.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import React, { useState } from 'react'; import Select from 'react-select'; function App() { const data = [ { value: 1, label: "cerulean" }, { value: 2, label: "fuchsia rose" }, { value: 3, label: "true red" }, { value: 4, label: "aqua sky" }, { value: 5, label: "tigerlily" }, { value: 6, label: "blue turquoise" } ]; const [selectedOption, setSelectedOption] = useState(null); // handle onChange event of the dropdown const handleChange = e => { setSelectedOption(e); } return ( <div className="App"> <a href="https://www.cluemediator.com">Clue Mediator</a><br /><br /> <Select placeholder="Select Option" value={selectedOption} // set selected value options={data} // set list of the data onChange={handleChange} // assign onChange function /> {selectedOption && <div style={{ marginTop: 20, lineHeight: '25px' }}> <b>Selected Option</b><br /> <div style={{ marginTop: 10 }}><b>Label: </b> {selectedOption.label}</div> <div><b>Value: </b> {selectedOption.value}</div> </div>} </div> ); } export default App; |
4. Output
That’s it for today.
Thank you for reading. Happy Coding!
i have a small problem here– i have to post data in database so.. there is 4 to 5 fields like input fields and dropdowns…in this case how to get all data in one array with there respective name field?????
format like :{ id: null, name: ‘Alex ‘, postal_code: ‘09890 ‘, country: ‘US ‘, added_by: ‘alex ‘ }
counrty is dropdown(React Select)
Please Help
Hi Rahul,
Check out the following article, where you will see we are collecting the value of the multiple fields.
Add or remove input fields dynamically with ReactJS
Hope this will help you!
how do i change the default style to this dropdown?
Hi Felipe, Check the following link for styling.
https://react-select.com/styles