Question

How to handle a multiple options <select> in React?

#react

Answer

You can pass an array into the value attribute, allowing you to select multiple options in a select tag...

<select multiple={true} value={['B', 'C']}>

To read the selected values in the onChange handler...

handleChange = (e) => {
  const selectedValues =
    [...e.target.options].filter(({selected}) => selected).map(({value}) => value);
  ...
}

[^1]: https://reactjs.org/docs/forms.html#the-select-tag
[^2]: https://stackoverflow.com/questions/28624763/retrieving-value-from-select-with-multiple-option-in-react

Learn

Author

xavi

Reviews
Last
next

Students 1