Get name of select component onChange

Is it possible to detect what select component triggered an onChange event? Doesn’t look like it in the docs, but maybe there is a workaround?

Use case: I have several select components that are filtering a table, right now every select component needs its own handleChange function triggered by OnChange, but all I need is the name to use as a key to make my updates.

e.g. would be nice to do something like:

constructor() {
  this.state = {
    branchFilter: '',
    moduleFilter: ''
  }
}

handleFilterChange(newValue, [selectedOptions], name) {
   this.setState({ 
       [name]: newVal
   });
}

render() {
   return (
      <div className='branch-filter'>
        <Select
          name="branchFilter"
          value={this.state.branchFilter}
          options={uniqueBranches(this.props.branches)}
          onChange={this.handleBranchFilterChange}
        />
        <Select
          name="moduleFilter"
          value={this.state.moduleFilter}
          options={uniqueModules(this.props.branches)}
          onChange={this.handleModuleFilterChange}
        />
      </div>

[MadeInMoon]

The following code works for me

class MyComponent extends React.Component {
  
  onSelectChange(name, value) {
    let obj = {};
    obj[name] = value;
    this.setState(obj);
  }
  
  render() {
    return (
        <Select name="myName" onChange={this.onSelectChange.bind(this, 'myName')}/>
    );
  }
  
}

and this one for a .map() iterator

const Selects = [
  {
    name: 'firstSelect',
    options: [
      {value: 'one', label: '1'},
      {value: 'two', label: '2'},
    ],
  },
  {
    name: 'secondSelect',
    options: [
      {value: 'one', label: '1'},
      {value: 'two', label: '2'},
      {value: 'three', label: '3'},
    ],
  },
];
    
class MyC extends React.Component {

  onSelectChange(name, value) {
    let obj = {};
    obj[name] = value;
    this.setState(obj);
  }

  render() {
    return (
      <div>
        {Selects.map((select, i)=>{
          return (
            <Select
              key={i}
              name={select.name}
              options={select.options}
              onChange={this.onSelectChange.bind(this, select.name)}
            />
          );
        })}
      </div>
  }

}

[atomoc]

The first thing that a user will encounter most often is stuck on this issue!