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)
Handling select dropdowns in React requires controlled components where React manages the selected value through component state and change handlers. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented select dropdown controls in thousands of React applications for user selection interfaces. From my expertise, the most effective approach is using controlled components with value property and onChange handler. This method provides predictable form behavior with proper state management and validation capabilities.
Use controlled components with value property and onChange handler for select dropdown management.
import { useState } from 'react'
function SelectForm() {
let [selectedValue, setSelectedValue] = useState('')
return (
<form>
<select
value={selectedValue}
onChange={(e) => setSelectedValue(e.target.value)}
>
<option value="">Choose an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<p>Selected: {selectedValue}</p>
</form>
)
}
The select element uses value property to control the selected option and onChange handler to update state when users make selections. Provide an empty default option for better user experience and clear selection states.
Best Practice Note:
This is the same select dropdown approach we use in CoreUI React components for form controls. Always use controlled components and provide meaningful option values for better form handling and validation.
