multiple select

class FlavorForm extends React.Component {
         constructor(props) {
            super(props);
            this.state = { value: [] };
 
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
         }
 
         handleChange(event) {
            let arr = this.state.value;
            let el = arr.indexOf(event.target.value)
            if (el > -1) arr.splice(el, 1)
            else arr.push(event.target.value)
            this.setState({ value: arr });
         }
 
         handleSubmit(event) {
            alert('Your favorite flavor is: ' + this.state.value);
            event.preventDefault();
         }
 
         render() {
            return (
               <form onSubmit={this.handleSubmit}>
                  <label>
                     Pick your favorite flavor:
          <select multiple={true} value={this.state.value} onChange={this.handleChange}>
                        <option value="grapefruit">Grapefruit</option>
                        <option value="lime">Lime</option>
                        <option value="coconut">Coconut</option>
                        <option value="mango">Mango</option>
                     </select>
                  </label>
                  <input type="submit" value="Submit" />
               </form >
            );
         }
      }
 
      ReactDOM.render(
         <FlavorForm />,
         document.querySelector('#root')
      )

export default function App() {
  const [value, setValue] = React.useState([]);
  const onChange = React.useCallback(
    (event) => {
      setValue(Array.from(event.target.selectedOptions, ({ value }) => value));
    },
    [setValue]
  );
  return (
    <div className="App">
      <select multiple value={value} onChange={onChange}>
        <option value="12">1</option>
        <option value="22">2</option>
        <option value="32">3</option>
        <option value="42">4</option>
      </select>
    </div>
  );
}

handleChange(event) {
  this.setState({
    value: Array.from(event.target.selectedOptions, ({ value }) => value)
  });
}