title: Multiple select dropdown with unique selection - React JS
body: <ol>
  <li>I have 4 select dropdowns. </li>
  <li>Selected values should not appear on the rest of the dropdowns list</li>
  </ol>
  
  <p>My <code>state</code> looks like this</p>
  
  <pre><code>this.state = {
      selectedDropdownArray: {},
      dropdownArray: ['select','1','2','3','4','5']
  }
  </code></pre>
  
  <p>below is my select dropdown component</p>
  
  <pre><code>&lt;SelectDropdown
      options={this.state.dropdownArray}
      value={this.getValue()}
      onChange={this.handleChange.bind(this)}                                         
  </code></pre>
  
  <p>On <code>handleChange</code> function i am just pushing the value to an object needed for rest of the work first then i am modifying the <code>dropdownArray</code> . The Array List of dropdown should filter based on the selection.</p>
  
  <p>Below is my <code>handleChange</code> function which the dropdown values are filtered.</p>
  
  <pre><code>handleChange(name, value){
      switch(name){
          case '1' :
              this.state.selectedDropdownArray["0"] = value === "select" ? null : value
          break;
          case '2' :
              this.state.selectedDropdownArray["1"] = value === "select" ? null : value
          break;
          case '3'
          ...
          ...
      }
  
      let filter = Object.values(this.state.selectedDropdownArray);
      let difference = this.state.dropdownArray.filter(x =&gt; !filter.includes(x));
  
  }
  </code></pre>
  
  <p>If 1st dropdown with value <code>1</code> is selected, the <code>difference</code> has now the filtered array <code>[2,3,4,5]</code> which i can <code>setState</code> to <code>dropdownArray</code>.</p>
  
  <p>But the 1st dropdown list does not have <code>1</code> to display in this select, since the array is already filtered.</p>
  
  <p>What is the valid approach to achieve this problem to have unique selection for each 4 select dropdowns.</p>