I am following the docs here to create a controlled component dropdown menu.
How would I be able to modify my handleChange function to make it aware that it is receiving a value from the 'Select Member' dropdown or the 'Select Day' dropdown, so that I can update the state values accordingly ("member" and "hour)?
import React, { Component } from 'react'
import { Dropdown, Grid } from 'semantic-ui-react'
class DropdownExampleRemote extends Component {
componentWillMount() {
this.setState({
optionsMembers: [
{ key: 1, text: 'DAILY', value: 'DAILY' },
{ key: 2, text: 'MONTHLY', value: 'MONTHLY' },
{ key: 3, text: 'WEEKLY', value: 'WEEKLY' },
],
optionsDays: [
{ key: 1, text: 'SUNDAY', value: 'SUNDAY' },
{ key: 2, text: 'MONDAY', value: 'MONDAY' },
{ key: 3, text: 'TUESDAY', value: 'TUESDAY' },
],
value: '',
member: '',
hour: '',
})
}
handleChange = (e, { value }) => {
this.setState({ member: value })
}
render() {
const {optionsMembers, optionsDays, value } = this.state
return (
<Grid>
<Grid.Column width={6}>
<Dropdown
selection
options={optionsMembers}
value={value}
placeholder='Select Member'
onChange={this.handleChange}
/>
</Grid.Column>
<Grid.Column width={6}>
<Dropdown
selection
options={optionsDays}
value={value}
placeholder='Select Day'
onChange={this.handleChange}
/>
</Grid.Column>
<Grid.Column width={4}>
<div>{this.state.member}</div>
<div>{this.state.day}</div>
</Grid.Column>
</Grid>
)
}
}
export default DropdownExampleRemote
UPDATE: Solution has worked to update state. Still not sure why the selection of dropbox doesn't stick and defaults to placeholder.