Manage state of multiple Dropdown's in React (Semantic-UI)

Question

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.

Rachel613 · Accepted Answer · 2017-07-18 01:05:17Z

4

I would recommend passing in the name of the value you would like to update into the handle change function, for example:

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

edited Jul 18, 2017 at 1:05

answered Jul 18, 2017 at 0:12

Rachel613

561 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Avi Kaminetzky Over a year ago

onChange={(e,{value})=>this.handleChange(value, 'day')} needs to be (e, value, 'day') like earlier version.

Rachel613 Over a year ago

@Avremel I removed it because the handle change function doesn't need the event at all. I also removed it from the params that handleChange takes in

Avi Kaminetzky Over a year ago

Why is it that the selection of dropdown doesn't stick and defaults to placeholder? Any way to fix?

Rachel613 Over a year ago

@Avremel you need the use the state you set as the value for the dropdown. I'll edit my answer to fix it

Chaim Friedman · Accepted Answer · 2017-07-18 00:08:40Z

1

Something along these lines can maybe work for you.

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

You can pass in the name of the property you want to update and then use bracket notation to update that part of your state.

Hope this helps.

answered Jul 18, 2017 at 0:08

Chaim Friedman

6,2714 gold badges37 silver badges66 bronze badges

Collectives™ on Stack Overflow

Manage state of multiple Dropdown's in React (Semantic-UI)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related