How to reset dropdown values when an option is selected from another dropdown in React.js

Question

If the user select the number 3 from the numbers drop down, this will make the names drop down to be disabled. I want to reset the names dropdown to "select name" when option 3 is selected.

const DropDown = ({ selectedValue, disabled, options, onChange }) => {
  return (
    <select onChange={onChange} disabled={disabled}>
      {
        options.map(o => <option value={o} selected={o == selectedValue}>{o}</option>)
      }
    </select>
  );
}


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      numbers: [1, 2, 3, 4, 5], // 3 should disable the second dropdown and reset
      names: ['john', 'jane', 'eric'],
      selectedNumber: '',
      selectedName: ''
    }

    this.onNumbersChange = this.onNumbersChange.bind(this);
    this.onNamesChange = this.onNamesChange.bind(this);
  }

  onNumbersChange(e) {
    this.setState({ selectedNumber: e.target.value });
  }

  onNamesChange(e) {
    this.setState({ selectedName: e.target.value });
  }

  render() {
    const { numbers, names, selectedNumber, selectedName } = this.state;
    return (
      <div>
        <DropDown
          options={numbers}
          selectedValue={selectedNumber}
          onChange={this.onNumbersChange}

        />
        <DropDown
          options={names}
          selectedValue={selectedName}
          onChange={this.onNamesChange}
          disabled={selectedNumber == 3} // this will be disabled if selected value of the first dropdown is 3
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

my dropdown is using redux form, field.

<Field name="Name" 
 component={renderSelect} 
 label="" 
 disabled options={options} 
 returnValue={"id"} 
 displayText={"name"} 
/> 

so this is my dropdown.. I am not able to reset its value

Answer 1

You need to make 2 changes

1. in onNumbersChange function, check if e.target.value is equal to 3. if it is, updated selectedValue in the state to be 'select name'
2. in DropDown component, if selectedValue prop is equal to 'select name', add an extra option with the value of 'select name' and add selected attribute on it.

const DropDown = ({ selectedValue, disabled, options, onChange }) => {
  return (
    <select onChange={onChange} disabled={disabled}>
      { 
         selectedValue === 'select name'
           ? <option value={selectedValue} selected>{ selectedValue }</option>
           : null
      }
      {
        options.map(o => <option value={o} selected={o == selectedValue}>{o}</option>)
      }
    </select>
  );
}


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      numbers: [1, 2, 3, 4, 5], // 3 should disable the second dropdown and reset
      names: ['john', 'jane', 'eric'],
      selectedNumber: '',
      selectedName: ''
    }

    this.onNumbersChange = this.onNumbersChange.bind(this);
    this.onNamesChange = this.onNamesChange.bind(this);
  }

  onNumbersChange(e) {
    if (e.target.value == 3) {
       this.setState({ selectedName: 'select name' });
    }
    this.setState({ selectedNumber: e.target.value });
  }

  onNamesChange(e) {
    this.setState({ selectedName: e.target.value });
  }

  render() {
    const { numbers, names, selectedNumber, selectedName } = this.state;
    return (
      <div>
        <DropDown
          options={numbers}
          selectedValue={selectedNumber}
          onChange={this.onNumbersChange}

        />
        <DropDown
          options={names}
          selectedValue={selectedName}
          onChange={this.onNamesChange}
          disabled={selectedNumber == 3} // this will be disabled if selected value of the first dropdown is 3
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

A better approach would be to add 'select name' in the names array in your state because after adding 'select name' in your state, you will only need to make some changes in the App component to get the required functionality.

const DropDown = ({ selectedValue, disabled, options, onChange }) => {
  return (
    <select onChange={onChange} disabled={disabled}>
      {
        options.map(o => <option value={o} selected={o == selectedValue}>{o}</option>)
      }
    </select>
  );
}


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      numbers: [1, 2, 3, 4, 5], // 3 should disable the second dropdown and reset
      names: ['select name', 'john', 'jane', 'eric'],
      selectedNumber: '',
      selectedName: ''
    }

    this.onNumbersChange = this.onNumbersChange.bind(this);
    this.onNamesChange = this.onNamesChange.bind(this);
  }

  onNumbersChange(e) {
    if (e.target.value == 3) {
       this.setState({ selectedName: this.state.names[0] });
    }
    this.setState({ selectedNumber: e.target.value });
  }

  onNamesChange(e) {
    this.setState({ selectedName: e.target.value });
  }

  render() {
    const { numbers, names, selectedNumber, selectedName } = this.state;
    return (
      <div>
        <DropDown
          options={numbers}
          selectedValue={selectedNumber}
          onChange={this.onNumbersChange}

        />
        <DropDown
          options={names}
          selectedValue={selectedName}
          onChange={this.onNamesChange}
          disabled={selectedNumber == 3} // this will be disabled if selected value of the first dropdown is 3
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>