Semantic-ui-react: Dropdown event.target.value is undefined

Created on 25 Oct 2017 · 4Comments · Source: Semantic-Org/Semantic-UI-React

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.

Source

taime

👍2

Most helpful comment

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

taime on 25 Oct 2017

👍16 ❤6 😄3 🚀1

All 4 comments

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

taime on 25 Oct 2017

👍16 ❤6 😄3 🚀1

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