Semantic-ui-react: Dropdown suggestion: allow "value" to be an object

[nbkhope]

So I have been using Dropdown for a simple select, except the value can only be a _string_. Why not allow the value to be an object?

We can access the options via the data object in the onChange function, but then what if we needed the whole single object instead of just its value?

For those knowledgeable about Angular 1.X, it's like the selected item in the ng-options.

[levithomason]

I've considered this a number of times actually. I'm currently working on improving the allowed values for the items prop as well, #1038, which has opened a clear path to allowing the value to be a string or object. I'm still considering it as I build out the rest of that PR, perhaps it will make it in.

The primary reason we've _not_ done this is to date is that we want to preserve the onChange => value loop for controlled components. The value you get back from the Dropdown's onChange is the value of the Dropdown, not the props object of the item. The PR I mentioned above would resolve this disconnect.

There's a good description of this past issue here: https://github.com/Semantic-Org/Semantic-UI-React/issues/912#issuecomment-262356714

You can see more historical context here: https://github.com/Semantic-Org/Semantic-UI-React/issues/754

[GreGGus]

I saw this issue #754 this morning. It's working. thanks.

[angelicalleite]

I found a not very good but functional solution and the errors stopped :)

const options = () => list.data.map((e) => { return {key: e.id, text: e.nome, value: JSON.stringify(e)}; })

values have objects as string, and when send data state for serve i am converter object again

const convertObject = JSON.parse(this.state.data)
 const dataServe= update(this.state.data, {
            $merge: {object: convertObject }
});

If you have something better I would be happy to know because I believe it is not the ideal solution, although it works, I would like value you can receive an object

[nbkhope]

@angelicalleite, I've considered that solution but concluded the one in issue #754 is so much simpler and better, using _.find() inside the event handler function.

[Aldorus]

Hi !
I used this solution, which has no dependency to lodash, but it could be too basic for your needs

<Dropdown
    placeholder="The coworker"
    fluid search selection
    value={coworkers.indexOf(this.state.coworker)}
    onChange={this.handleCoworkerChange}
    options={coworkers.map(this.renderMenuItemCoworker)}>
</Dropdown>

handleCoworkerChange = (event, {value}) => this.setState({coworker: coworkers[value]});

renderMenuItemCoworker = (coworker, index) => {
        return {
            key: index,
            text: `${coworker.firstname || ''} ${coworker.lastname || ''}`,
            value: index
        };
    };