Quick React Select Value Example
September 02, 2021
There are two types of React form components. Controlled and uncontrolled. I almost always use controlled components. They just makes managing the state easier, and it’s the preferred way in React to work with forms.
The form below is a react select value change example. It uses the React useState hook to set and update the selected value for the form. That same state value is then displayed below the form.
import React, { useState } from 'react';
export const Select = () => {
const [value, setValue] = useState('Blue');
const handleChange = (event) => {
setValue(event.target.value);
}
return (
<>
<form>
<label htmlFor="color">
Pick your favorite color:
</label>
<select name="color" value={value} onChange={handleChange}>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Purple">Purple</option>
</select>
</form>
<div>You're favorite color is: {value}</div>
</>
);
}
An important thing to note with this design is that the onChange
event handler is on the parent select element. It’s sometimes tempting to add the handler to each option, but that could have unexpected results.
The onChange
function itself is automatically passed the event object, and looks at the event target’s value
property to get the newly selected value. An alternative way and more explicit way to call the handleChange
function is shown below. This approach is fine, but it just requires slightly more code.
<select ... onChange={(event) => handleChange(event)}>
...
</select>