Handle the onChange event on a Select element in React

# Handle the onChange event on a Select element in React

To handle the onChange event on a select element in React:

Set the onChange prop on the select element.
Keep the value of the selected option in a state variable.
Every time the user changes the selected option, update the state variable.

App.js

Copied!
import {useState} from 'react';

const App = () => {
  const options = [
    {value: '', text: '--Choose an option--'},
    {value: 'apple', text: 'Apple 🍏'},
    {value: 'banana', text: 'Banana 🍌'},
    {value: 'kiwi', text: 'Kiwi 🥝'},
  ];

  const [selected, setSelected] = useState(options[0].value);

  const handleChange = event => {
    console.log(event.target.value);
    setSelected(event.target.value);
  };

  return (
    <div>
      <select value={selected} onChange={handleChange}>
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.text}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

react select onchange

The code for this article is available on GitHub

The example defines all options in an array in order to make our JSX code more concise, but you could write each option element manually.

If you'd rather type in the options manually, check out the last code snippet in the article.

We used the useState hook to store the value of the selected option.

App.js

Copied!
const [selected, setSelected] = useState(options[0].value);

The parameter we passed to the hook is the initial state.

In the example, we set the initially selected value to an empty string, which is the value of the first option element.

If you want to have a different option selected initially, pass its value to the useState hook.

You can read more about setting a placeholder on a select tag in this article.

We set the onChange prop on the select element, so every time its value is changed, the handleChange function is invoked.

App.js

Copied!
const handleChange = event => {
  console.log(event.target.value);
  setSelected(event.target.value);
};

The target property on the event object refers to the select element, so we can access the selected value as event.target.value.

In our handleChange function, we simply update the state with the value of the selected option.

If you need to get the text that's associated with the selected option element, access the label property on the selected option.

App.js

Copied!
const handleChange = event => {
  console.log('Label 👉️', event.target.selectedOptions[0].label);

  console.log(event.target.value);
  setSelected(event.target.value);
};

The code for this article is available on GitHub

# Defining each option element manually

Here is an example of how you would manually type in the options of the select element without using map().

App.js

Copied!
import {useState} from 'react';

const App = () => {
  // 👇️ initial value of empty string (first option)
  const [selected, setSelected] = useState('');

  const handleChange = event => {
    console.log('Label 👉️', event.target.selectedOptions[0].label);
    console.log(event.target.value);
    setSelected(event.target.value);
  };

  return (
    <div>
      <select value={selected} onChange={handleChange}>
        <option value="">--Choose an option--</option>
        <option value="apple">Apple 🍏</option>
        <option value="banana">Banana 🍌</option>
        <option value="kiwi">Kiwi 🥝</option>
      </select>
    </div>
  );
};

export default App;

defining each option element manually

The code for this article is available on GitHub

We set an initial value of an empty string for the select element, which will render the first option.

App.js

Copied!
const [selected, setSelected] = useState('');

You can change which option is selected by default by providing a different initial value, e.g. apple.

Make sure that the initial value is one of the possible values of the value prop on the option elements.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Handle the onChange event on a Select element in React

# Handle the onChange event on a Select element in React

# Defining each option element manually

Borislav Hadzhiev