title: Two handleChange events using multiple select option in react js
body: <p>I'm trying to write (two) multiple selected options using two handle change functions, I don't think it's not a good practice, in that two selected options I have to bind that data separately without disturbing the other multiple selected option.</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  
  class AddEvent extends Component {
    constructor() {
      super();
      this.state = {
        speaker: [''],
        hash_tag: ['']
      };
      this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
      var options = event.target.options;
      var value = [];
      for (var i = 0, l = options.length; i &lt; l; i++) {
        if (options[i].selected) {
          value.push(options[i].value);
        }
      }
      this.setState({ value: value });
    }
  
    handleChange(event2) {
      var options2 = event2.target.options;
      var value2 = [];
      for (var j = 0, l = options2.length; j &lt; l; j++) {
        if (options2[j].selected) {
          value2.push(options2[j].value);
        }
      }
      this.setState({ value: value2 });
    }
  
    render() {
      return (
        &lt;div className="col-md-12"&gt;
          &lt;h3&gt;Add Events&lt;/h3&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;div className="col-md-6"&gt;
              &lt;div className="form-group"&gt;
                &lt;label&gt;Event Speaker:&lt;/label&gt;
                &lt;select
                  data-style="btn-default"
                  className="form-control"
                  multiple
                  data-max-options="3"
                  value={this.state.value}
                  onChange={this.handleChange}
                &gt;
                  &lt;option value="Vivek Srinivasan"&gt;Vivek Srinivasan&lt;/option&gt;
                  &lt;option value="Salma Moosa"&gt;Salma Moosa&lt;/option&gt;
                  &lt;option value="Rengaprasad"&gt;Rengaprasad&lt;/option&gt;
                &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="col-md-6"&gt;
              &lt;div className="form-group"&gt;
                &lt;label&gt;Event Hash Tags:&lt;/label&gt;
                &lt;select
                  data-style="btn-default"
                  className="form-control"
                  multiple
                  data-max-options="3"
                  value={this.state.value}
                  onChange={this.handleChange2}
                &gt;
                  &lt;option value="hash_tag_1"&gt;hash_tag_1&lt;/option&gt;
                  &lt;option value="hash_tag_2"&gt;hash_tag_2&lt;/option&gt;
                  &lt;option value="hash_tag_3"&gt;hash_tag_3&lt;/option&gt;
                  &lt;option value="hash_tag_4"&gt;hash_tag_4&lt;/option&gt;
                  &lt;option value="hash_tag_5"&gt;hash_tag_4&lt;/option&gt;
                &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div className="col-md-12"&gt;
              &lt;div className="form-group"&gt;
                &lt;label&gt;Event Content&lt;/label&gt;
                &lt;textarea
                  id="summernote"
                  value="Type Here "
                  onChange={val =&gt; this.setState({ content: val.target.value })}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div className="col-md-3"&gt;
              &lt;button className="btn btn-block btn-primary btn-lg" type="submit"&gt;
                Save Event
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  export default AddEvent;
  </code></pre>