score:4

Accepted answer
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: '',
      day: '',
    })
  }

  handleChange = (value, key) => {
    this.setState({ [key]: value });
  }

  render() {
    const {optionsMembers, optionsDays, value, member, day } = this.state

    return (
      <Grid>
        <Grid.Column width={6}>
          <Dropdown
            selection
            options={optionsMembers}
            value={member}
            placeholder='Select Member'
            onChange={(e,{value})=>this.handleChange(value, 'member')}
          />
        </Grid.Column>
        <Grid.Column width={6}>
          <Dropdown
            selection
            options={optionsDays}
            value={day}
            placeholder='Select Day'
            onChange={(e,{value})=>this.handleChange(value, 'day')}
          />
        </Grid.Column>
        <Grid.Column width={4}>
          <div>{member}</div>
          <div>{day}</div>
        </Grid.Column>
      </Grid>
    )
  }
}

export default DropdownExampleRemote

score:1

handleChange = (propName, e) => {
  let state = Object.assign({}, state);
  state[propName] = e.target.value;
  this.setState(state)
}

Related Query

More Query from same tag