Dropdown event.target.value is undefined

[taime]

I'm trying to do controlled component as it shown in official Rect documentation (https://reactjs.org/docs/forms.html):

<Dropdown value={this.state.value} onChange={this.handleChange} />

handleChange = (event) => {
    this.setState({value: event.target.value});
  }

But **event.target.value is undefined ** so it's impossible to do controlled component as usual.
May be you've made your own way to do this. But then where is documentation for this? I've search a lot... Couldn't find how to do controlled component with Semantic UI Dropdown.

[taime]

I've find out there solution (you should add it to docs, because it's not standard behaviour):

handleChange = (event, data) => {
    this.setState({value: data.value});
  }

[brianespinosa]

Hello @taime,

If you take a look at the docs for all SUIR components, all component prop events are layered on top of the regular React SyntheticEvents. If you look at https://react.semantic-ui.com/modules/dropdown for the onClick event (and for all events) this is documented there.

Called when the user attempts to change the value.
onChange(event: SyntheticEvent, data: object)
event
React's original SyntheticEvent.
data
All props and proposed value.

There are also a LOT of working examples down the pages of the docs with examples of how this onChange function works with (event, data): https://react.semantic-ui.com/modules/dropdown#dropdown-example-remote

[levithomason]

Duplicate #638. Note that it is impossible to get the a value from the event object, see #638 (comment).

[boatengfrankenstein]

can you at least evt.target.id? It doesn't return any value