How to Create a Dropdown in React: Simple Guide with Example

To create a dropdown in React, use a select element inside a functional component and manage its selected value with the useState hook. Update the state on onChange event to reflect the user's choice.

Syntax

A dropdown in React is created using the HTML <select> element combined with React's useState hook to track the selected option. The value attribute sets the current selection, and onChange updates the state when the user picks a new option.

• useState: Holds the selected value.
• select: The dropdown container.
• option: Each choice inside the dropdown.
• onChange: Event handler to update state on selection.

jsx

import React, { useState } from 'react';

function Dropdown() {
  const [selected, setSelected] = useState('');

  function handleChange(event) {
    setSelected(event.target.value);
  }

  return (
    <select value={selected} onChange={handleChange}>
      <option value="">Select an option</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

export default Dropdown;

Output

A dropdown menu with options: 'Select an option', 'Option 1', 'Option 2', 'Option 3'. User can pick one option.

Example

This example shows a dropdown that lets the user pick a fruit. The selected fruit is shown below the dropdown. It demonstrates how to use useState to track the choice and update the UI accordingly.

jsx

import React, { useState } from 'react';

export default function FruitSelector() {
  const [fruit, setFruit] = useState('');

  return (
    <div>
      <label htmlFor="fruits">Choose a fruit: </label>
      <select
        id="fruits"
        value={fruit}
        onChange={e => setFruit(e.target.value)}
        aria-label="Fruit selector"
      >
        <option value="">--Please choose--</option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
      {fruit && <p>You selected: <strong>{fruit}</strong></p>}
    </div>
  );
}

Output

A dropdown labeled 'Choose a fruit:' with options '--Please choose--', 'Apple', 'Banana', 'Orange'. When user selects a fruit, text below shows 'You selected: [fruit]'.

Common Pitfalls

Common mistakes when creating dropdowns in React include:

• Not controlling the value of the select, causing React warnings or unexpected behavior.
• Forgetting to update state on onChange, so the dropdown never changes visually.
• Using defaultValue instead of value in controlled components, which breaks React's controlled input pattern.
• Not adding a unique key when rendering options dynamically (not shown here but important in lists).

Example of wrong and right ways:

jsx

import React, { useState } from 'react';

// Wrong: Missing value prop and no state update
function WrongDropdown() {
  return (
    <select>
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
  );
}

// Right: Controlled component with state and onChange
function RightDropdown() {
  const [val, setVal] = useState('a');
  return (
    <select value={val} onChange={e => setVal(e.target.value)}>
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
  );
}

Output

WrongDropdown: Dropdown shows but React warns about uncontrolled input.
RightDropdown: Dropdown works correctly, selection updates state and UI.

Quick Reference

Tips for creating dropdowns in React:

• Always use value and onChange for controlled dropdowns.
• Initialize state with a default or empty string.
• Use label and aria-label for accessibility.
• Render options with unique value attributes.
• Update state inside onChange handler using event.target.value.

Key Takeaways

Use React's useState hook to track the selected dropdown value.

Control the dropdown with value and onChange props for predictable behavior.

Always update state inside the onChange event handler using event.target.value.

Add labels and aria attributes for better accessibility.

Avoid mixing controlled and uncontrolled input patterns to prevent warnings.