How to display dropdown value selected by user in another textbox?

Question

How to display dropdown value selected by user in another textbox?

Answer

Use useState to store the dropdown’s value and bind it to another input.

import { useState } from 'react';

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

  return (
    <div>
      <select onChange={(e) => setSelected(e.target.value)}>
        <option value=''>Select Language</option>
        <option value='React'>React</option>
        <option value='Vue'>Vue</option>
        <option value='Angular'>Angular</option>
      </select>

      <input value={selected} readOnly placeholder='Selected value' />
    </div>
  );
}

✅ The selected state stores the dropdown value and displays it instantly in the textbox.

Real-World Example

• Displaying user’s selected options for confirmation
• Reflecting values in dynamic forms

Quick Practice

Create a “Select Country” dropdown and display the selected country in a read-only textbox below.

Summary

Store dropdown selections in state and use that state to reflect the value in any input or display field.