Two handleChange events using multiple select option in react js

Question

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.

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 < 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 < l; j++) {
      if (options2[j].selected) {
        value2.push(options2[j].value);
      }
    }
    this.setState({ value: value2 });
  }

  render() {
    return (
      <div className="col-md-12">
        <h3>Add Events</h3>
        <form onSubmit={this.handleSubmit}>
          <div className="col-md-6">
            <div className="form-group">
              <label>Event Speaker:</label>
              <select
                data-style="btn-default"
                className="form-control"
                multiple
                data-max-options="3"
                value={this.state.value}
                onChange={this.handleChange}
              >
                <option value="Vivek Srinivasan">Vivek Srinivasan</option>
                <option value="Salma Moosa">Salma Moosa</option>
                <option value="Rengaprasad">Rengaprasad</option>
              </select>
            </div>
          </div>
          <div className="col-md-6">
            <div className="form-group">
              <label>Event Hash Tags:</label>
              <select
                data-style="btn-default"
                className="form-control"
                multiple
                data-max-options="3"
                value={this.state.value}
                onChange={this.handleChange2}
              >
                <option value="hash_tag_1">hash_tag_1</option>
                <option value="hash_tag_2">hash_tag_2</option>
                <option value="hash_tag_3">hash_tag_3</option>
                <option value="hash_tag_4">hash_tag_4</option>
                <option value="hash_tag_5">hash_tag_4</option>
              </select>
            </div>
          </div>

          <div className="col-md-12">
            <div className="form-group">
              <label>Event Content</label>
              <textarea
                id="summernote"
                value="Type Here "
                onChange={val => this.setState({ content: val.target.value })}
              />
            </div>
          </div>

          <div className="col-md-3">
            <button className="btn btn-block btn-primary btn-lg" type="submit">
              Save Event
            </button>
          </div>
        </form>
      </div>
    );
  }
}
export default AddEvent;

Answer 1

I don't quite understand why you don't want to use different handlers for each select element. Especially since you've already written two handler functions. Perhaps I've misunderstood your question.

You got three main problems, as I see it.

1) You can't have two functions with the same name, as you do with handleChange.

2) In your current code, you're referencing a function that doesn't exist (handleChange2).

3) In both handleChange functions, you're overriding the value property in the state with the other, as both are changing the property value in the state.

Renaming the latter handleChange function to handleChange2 would solve problems 1 and 2.

The third problem would be solved by having two value properties in your state, e.g. value1 and value2 (though I would suggest using more descriptive names).