Dropdown onChange

is there a way to get more than just the value from the onChange event? I’d like to get other values from the objects defined in options.

eg:

` const options = [
      { key: 1, text: 'Green', value: ComponentGroup.GREEN, color: 'green' },
      { key: 2, text: 'Red', value: ComponentGroup.RED, color: 'red'},
      { key: 3, text: 'Blue', value: ComponentGroup.BLUE, color: 'blue'},
    ]

    return (
         <Dropdown className={styles.root} options={options} onChange={this.selectGroup} pointing='top left' icon={null} trigger={
            <span><span className={styles.groupIcon} style={{ backgroundColor: this.state.groupColor}} />Group</span>
         } />
    );
  }

  private readonly selectGroup = (event: React.SyntheticEvent<HTMLDivElement>, data: any) => {
     this.props.setGroup(data.value);
     this.setState({ groupColor: data.color });
  }`

[levithomason]

I would propose to keep your values unique. Consider also the reverse case, if there are several duplicate values, which one does the Dropdown select when used as a controlled component? There would be no way to know for sure.

[mihai-dinculescu]

You shouldn’t worry too much about iterating though an array. It’s a fairly simple operation and a standard practice.

If you are keen on avoiding the iteration, you can have value store the index for each option.