React · Theory

Dropdown in React

Theory

68/94

Dropdown in React

Controlled <select value={city} onChange={e => setCity(e.target.value)}> with <option> children. Same idea as an input. Custom dropdowns (div + keyboard) are extra a11y work — native select is the viva answer unless they ask for a design-system menu.

Dropdown in React — start Pune. Pick Delhi → state Delhi. Uncontrolled select is harder to test.

Exam tip

Controlled <select>.

Example

// Select
import { useState } from "react";

export default function City() {
  const [city, setCity] = useState("Pune");
  return (
    <select value={city} onChange={(e) => setCity(e.target.value)}>
      <option>Pune</option>
      <option>Delhi</option>
    </select>
  );
}

Dropdown in React — start Pune. Pick Delhi → state Delhi. Uncontrolled select is harder to test.

Short notes

DefControlled select.
RuleValue + onChange.
RememberNative first.

React · Theory

Dropdown in React

← All stacks

Theory

68/94

Dropdown in React

Dropdown in React — start Pune. Pick Delhi → state Delhi. Uncontrolled select is harder to test.

Exam tip

Controlled <select>.

Example

// Select
import { useState } from "react";

export default function City() {
  const [city, setCity] = useState("Pune");
  return (
    <select value={city} onChange={(e) => setCity(e.target.value)}>
      <option>Pune</option>
      <option>Delhi</option>
    </select>
  );
}

Dropdown in React — start Pune. Pick Delhi → state Delhi. Uncontrolled select is harder to test.

Short notes

DefControlled select.
RuleValue + onChange.
RememberNative first.

Dropdown in React

Example

Short notes

Questions

Dropdown in React

Example

Short notes

Questions