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.
• onChange updates 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;

• multiple allows selecting more than one option.
• value is an array of selected items.
• You need to loop through options to 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;

• ref gives access to the selected value only when needed.
• Less flexible but simpler for quick forms or prototypes.