You need onChange event handler to work with <select>, one of the most common input elements in React.
Specific Examples
onChange event handler to save selected value in the state
React docs recommend to store input values in the state. To make this work, you need an onChange event handler to update the state every time there’s a change to user inputs in React.
You need to set onChange prop to a function. Most often, onChange is set to a callback function that accepts one argument – instance of a SyntheticEvent.
Every time the event occurs, React calls onChange event handler and passes one argument – instance of SyntheticEvent.
<select onChange={(e) => setSelected(e.target.v<select onChange={(e) => setSelected(e.target.value)}>alue)}>In this example, we define an onChange event handler where e argument stands for SyntheticEvent.
SyntheticEvent is an object that contains information about the event and DOM elements involved.
In this case, we access currently selected value via e.target.value and use the setSelected() function to update the state.
Let’s look at a full component where we track changes in the <select> input and display the selected option:
In this example, first we access target property of SyntheticEvent (referred to as e). Value of target property is an object that contains a lot of information about DOM element and the event. We need to access value property of target object to get the selected value.
In short, we get selected option value on e.target.event.
Once we have option value, we need to store it in the state.
First, we use the useState() hook to create a state variable and a function to update it.
In the example, we pass the value of the selected option to the setSelected() hook, which sets the selected variable equal to the option value.
In our example, we use <h1> element to display selected option. Every time user chooses a different option, header text is updated. This is because onChange updates the state, which causes the component to re-rerender.
Class components do not support hooks. Instead of using the useState() hook, you have to initialize an object and use the setState() method to update the state.
onChange event handler for multiple selected values
Sometimes you want to let users choose multiple options. This complicates things, because there’s more than one selected value to access.
Fortunately, SyntheticEvent also contains information about multiple selected values. As you may remember, every onChange event handler is passed an instance of SyntheticEvent object that describes the event and DOM elements involved.
Previously, you needed to access e.target.value to get the value of one selected option. To access multiple selected values in onChange, you need to read the event.target.selectedOptions property instead.
Let’s look at an example:
We have a <select> element with a multi-select feature. Users can hold down CTRL to choose multiple options.
Every time user chooses an option, onChange event accesses e.target.selectedOptions property and sets state variable to selected option values. Remember, e is short for SyntheticEvent.
Next, let’s explore how to handle onChange event with react-select library. This is a great library that allows you to easily implement advanced features like multi-select.
onChange event handler for react-select custom component
Component reusability is one of the biggest advantages of React. You can reuse your own components and more importantly, components someone else has already built.
react-select utility provides a custom <Select> component. You can simply add props and attributes to implement advanced features.
You can set onChange on custom <Select> component the same way you’d set it to standard <select> element in React. Set it to a function that’s going to run every time there’s a change event.
In react-select, selected value is passed as the argument to the event handler. So it’s much easier to access the selected value.
Let’s look at an example:
onChange event handler for multiple values in react-select
react-select does not care about the number of selected options. All selected values are passed as argument to the onChange event handler.
Let’s go back to our previous example. Thanks to isMulti prop, users can select multiple options. When they do, all selected options will be passed as argument to the onChange function.
Selected values are stored as array of objects, where each object has two properties – label and value. These properties correspond to option label and value in standard HTML.
