How to handle select dropdown in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Select dropdowns in React enable users to choose from predefined options using controlled components. This pattern provides predictable state management for both single and multiple selections with proper form integration.
Use controlled components with value, onChange, and proper option mapping for select dropdowns.
import { useState } from 'react'
function SelectDropdownDemo() {
const [selectedCountry, setSelectedCountry] = useState('')
const [selectedTheme, setSelectedTheme] = useState('light')
const [selectedTags, setSelectedTags] = useState([])
const countries = [
{ value: 'us', label: 'United States' },
{ value: 'ca', label: 'Canada' },
{ value: 'uk', label: 'United Kingdom' },
{ value: 'de', label: 'Germany' }
]
const themes = [
{ value: 'light', label: 'Light Theme' },
{ value: 'dark', label: 'Dark Theme' },
{ value: 'auto', label: 'Auto Theme' }
]
const tags = ['React', 'JavaScript', 'TypeScript', 'CSS', 'HTML']
const handleCountryChange = (event) => {
setSelectedCountry(event.target.value)
}
const handleThemeChange = (event) => {
setSelectedTheme(event.target.value)
}
const handleTagsChange = (event) => {
const value = Array.from(event.target.selectedOptions, (option) => option.value)
setSelectedTags(value)
}
return (
<div>
{/* Basic single select */}
<div>
<label>Country:</label>
<select value={selectedCountry} onChange={handleCountryChange}>
<option value="">Select a country</option>
{countries.map(country => (
<option key={country.value} value={country.value}>
{country.label}
</option>
))}
</select>
<p>Selected: {selectedCountry || 'None'}</p>
</div>
{/* Select with default value */}
<div>
<label>Theme:</label>
<select value={selectedTheme} onChange={handleThemeChange}>
{themes.map(theme => (
<option key={theme.value} value={theme.value}>
{theme.label}
</option>
))}
</select>
<p>Current theme: {selectedTheme}</p>
</div>
{/* Multiple select */}
<div>
<label>Technologies (Hold Ctrl/Cmd for multiple):</label>
<select multiple value={selectedTags} onChange={handleTagsChange}>
{tags.map(tag => (
<option key={tag} value={tag}>
{tag}
</option>
))}
</select>
<p>Selected ({selectedTags.length}): {selectedTags.join(', ')}</p>
</div>
</div>
)
}
export default SelectDropdownDemo
Select dropdowns in React use controlled components with the value prop for current selection and onChange handler for updates. For single selection, use a string value; for multiple selection, use an array with the multiple attribute. Extract values from selectedOptions for multiple selects using Array.from(). Always provide an empty option for single selects to allow deselection. Use proper labeling for accessibility and map options dynamically from data arrays.
Best Practice Note:
This is the same select dropdown approach used in CoreUI React components. Use controlled components for predictable state, provide empty options for single selects, handle multiple selections with arrays, and ensure proper labeling for accessibility and keyboard navigation support.
