Semantic-ui-react: Dropdown onChange

[raptoria]

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 });
  }`

[mihai-dinculescu]

Sure you can do that.

data gives you all the props of the dropdown. You can use data.options.

[raptoria]

data.options gives me all my options..how do I know which one got selected? is there an array index that I get with the event?

[mihai-dinculescu]

data.value provides the selected value. You can use it to fetch the selected object from data.options.

[raptoria]

but that would require looping through the array of objects and seeing which value equals data.value. It seems like if the array index was provided with the event it would be a lot more efficient.

[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.

[raptoria]

oh, good idea :)

[cesarve77]

And if you have more than one option with the same value?

[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.