Multiple dropdown menu state

Question

I have three material ui dropdowns. I want to when I select one the state value changes, which is partly alright, however it is incorrect because it changes the values of the other dropdown menus how can I solve this issue?

import React,{Component} from 'react';
        import DropDownMenu from 'material-ui/DropDownMenu';
        import MenuItem from 'material-ui/MenuItem';

        class DateOfBirth extends Component{
            constructor(props){
                super(props)
                this.state ={
                    year: '2005',
                    month: '08',
                    day: '10',
                    value: 1
                }
            }

            handleChange = (event, index, value) => {
                this.setState({value});
            }
            componentWillMount(){
                const {date} = this.props
                console.log(date)
            }
            render(){
                return(
                    <div>
                        <p>Date Of Birth</p>
                        <DropDownMenu
                            value={this.state.value}
                            onChange={this.handleChange}>
                            <MenuItem value={1} primaryText="Year" />
                            <MenuItem value={this.state.year} primaryText={this.state.year} />
                        </DropDownMenu>

                        <DropDownMenu
                            value={this.state.value}
                            onChange={this.handleChange}
                        >
                            <MenuItem value={1} primaryText="Month" />
                            <MenuItem value={this.state.month} primaryText={this.state.month}/>
                        </DropDownMenu>

                        <DropDownMenu
                            value={this.state.value}
                            onChange={this.handleChange}
                        >
                            <MenuItem value={1} primaryText="Day" />
                            <MenuItem key="day" value={this.state.day} primaryText={this.state.day} />
                        </DropDownMenu>
                    </div>
                )
            }
        }
        export  default  DateOfBirth

Answer 1

Reason is, you are using single state variable to control three dropdowns, instead of that use three separate state values, one for each dropdown.

Like this:

 this.state ={
      year: '2005',
      month: '08',
      day: '10',
      value1: 1, 
      value2: 1,
      value3: 1
 }

Write the render method like this:

render(){
    return(
        <div>
            <p>Date Of Birth</p>
            <DropDownMenu
                value={this.state.value1}
                onChange={(e, i, value) => this.setState({value1: value})}>
                <MenuItem value={1} primaryText="Year" />
                <MenuItem value={this.state.year} primaryText={this.state.year} />
            </DropDownMenu>

            <DropDownMenu
                value={this.state.value2}
                 onChange={(e, i, value) => this.setState({value2: value})}>
            >
                <MenuItem value={1} primaryText="Month" />
                <MenuItem value={this.state.month} primaryText={this.state.month}/>
            </DropDownMenu>

            <DropDownMenu
                value={this.state.value3}
                 onChange={(e, i, value) => this.setState({value3: value})}>
            >
                <MenuItem value={1} primaryText="Day" />
                <MenuItem key="day" value={this.state.day} primaryText={this.state.day} />
            </DropDownMenu>
        </div>
    )
}

Note: If you are using the common onChange method then bind some identifier with onChange to identify which dropdown was changed and update the specific state value.

Update by using a single onChange method:

render(){
    return(
        <div>
            <p>Date Of Birth</p>
            <DropDownMenu
                value={this.state.value1}
                onChange={(e, i, value) => this._handleChange('value1', value)}>
                <MenuItem value={1} primaryText="Year" />
                <MenuItem value={this.state.year} primaryText={this.state.year} />
            </DropDownMenu>

            <DropDownMenu
                value={this.state.value2}
                 onChange={(e, i, value) => this._handleChange('value2', value)}>
            >
                <MenuItem value={1} primaryText="Month" />
                <MenuItem value={this.state.month} primaryText={this.state.month}/>
            </DropDownMenu>

            <DropDownMenu
                value={this.state.value3}
                 onChange={(e, i, value) => this._handleChange('value3', value)}>
            >
                <MenuItem value={1} primaryText="Day" />
                <MenuItem key="day" value={this.state.day} primaryText={this.state.day} />
            </DropDownMenu>
        </div>
    )
}

_handleChange(fieldName, value){
    this.setState({
        [fieldName]: value
    });
}