React Select – Dropdowns in Forms
Dropdowns (select elements) are a common UI pattern for letting users pick one or more options. In React, <select> elements can be controlled or uncontrolled, just like inputs and textareas.
Using React state makes dropdowns dynamic, reusable, and easy to validate.
Controlled Select Dropdown
A controlled dropdown binds its value to React state. This gives you full control over selection changes.
Example – Single Selection Dropdown
import React, { useState } from "react";
function SingleSelect() {
const [fruit, setFruit] = useState("apple");
const handleChange = (e) => {
setFruit(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
alert(`Selected Fruit: ${fruit}`);
};
return (
<form onSubmit={handleSubmit}>
<label>
Pick a fruit:
<select value={fruit} onChange={handleChange}>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="mango">Mango</option>
</select>
</label>
<button type="submit">Submit</button>
<p>Selected: {fruit}</p>
</form>
);
}
export default SingleSelect;
value={fruit}binds the select to state.onChangeupdates the selected option in real-time.- Easy to validate or trigger other UI updates based on selection.
Multiple Selection Dropdown
React also supports multiple selections using the multiple attribute. The state is usually an array of selected values.
Example – Multi-Select Dropdown
import React, { useState } from "react";
function MultiSelect() {
const [selectedFruits, setSelectedFruits] = useState([]);
const handleChange = (e) => {
const options = e.target.options;
const selected = [];
for (let i = 0; i < options.length; i++) {
if (options[i].selected) {
selected.push(options[i].value);
}
}
setSelectedFruits(selected);
};
return (
<div>
<label>
Pick your favorite fruits:
<select multiple value={selectedFruits} onChange={handleChange}>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="mango">Mango</option>
</select>
</label>
<p>Selected Fruits: {selectedFruits.join(", ")}</p>
</div>
);
}
export default MultiSelect;
multipleallows selecting more than one option.valueis an array of selected items.- You need to loop through
optionsto determine selected items.
Dynamic Options from Array
Often, options come from an API or array, making your select component reusable.
Example – Dynamic Dropdown
- Options are generated dynamically using
map(). - Easy to integrate API data.
- Keys ensure React efficiently updates the list.
import React, { useState } from "react";
function DynamicSelect() {
const [fruit, setFruit] = useState("");
const fruits = ["Apple", "Banana", "Orange", "Mango"];
return (
<div>
<label>
Select Fruit:
<select value={fruit} onChange={(e) => setFruit(e.target.value)}>
<option value="">--Choose--</option>
{fruits.map((f) => (
<option key={f} value={f.toLowerCase()}>
{f}
</option>
))}
</select>
</label>
<p>Selected Fruit: {fruit}</p>
</div>
);
}
export default DynamicSelect;
Uncontrolled Select Dropdown
You can also make uncontrolled dropdowns using ref. This is useful for simple forms without real-time validation.
Example – Uncontrolled Select
import React, { useRef } from "react";
function UncontrolledSelect() {
const selectRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
alert(`Selected Fruit: ${selectRef.current.value}`);
};
return (
<form onSubmit={handleSubmit}>
<select ref={selectRef}>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="mango">Mango</option>
</select>
<button type="submit">Submit</button>
</form>
);
}
export default UncontrolledSelect;
refgives access to the selected value only when needed.- Less flexible but simpler for quick forms or prototypes.