title: How to disable dropdown when a specific option is selected in React?
body: <p>I have implemented a table using React Table(<a href="https://react-table.js.org" rel="nofollow noreferrer">https://react-table.js.org</a>). I populate the data based on the data I get from server. Right now I have two filter dropdowns on top of two columns. I want to disable column 2 filter dropdown if the column 1 filter dropdown is set to a specific value.
  <a href="https://i.stack.imgur.com/8rRrJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8rRrJ.png" alt="enter image description here"></a></p>
  
  <p>I have implemented the basic filter dropdown as follows:</p>
  
  <pre><code>    {
                Header: 'Name',
                accessor: 'Name',
                id: 'Name',
                Cell: ({ value }) =&gt;
                value === 'group1' ? 'group1' : 'group2',
                filterMethod: (filter, row) =&gt; {
                  if (filter.value === 'all') {
                    return true;
                  }
                  if (filter.value === 'group1') {
                    return row[filter.id] === 'group1';
                  }
                },
                Filter: ({ filter, onChange }) =&gt; (
                  &lt;select
                      onChange={event =&gt; onChange(event.target.value)}
                      style={{ width: '100%' }}
                      value={filter ? filter.value : 'all'}
                  &gt;
                    &lt;option value="all"&gt;All&lt;/option&gt;
                    &lt;option value="group1"&gt;Group1&lt;/option&gt;
                  &lt;/select&gt;
              ),
              },
              {
                filterable: ({ val }) =&gt; {
                    if (tenantName.value === 'group1') {
                      return true;
                    }
                    else {
                      return false;
                    }
                },
                Header: 'ID',
                accessor: 'Id',
                id: 'Id',
                Cell: ({ value }) =&gt; (value === '3' ? '3' : '5'),
                filterMethod: (filter, row) =&gt; {
                  if (filter.value === 'all') {
                    return true;
                  }
                  if (filter.value === '3') {
                    return row[filter.id] === '3';
                  }
                  if (filter.value === '5') {
                    return row[filter.id] === '5';
                  }
  
                },
                Filter: ({ filter, onChange }) =&gt; (
                  &lt;select
                      onChange={event =&gt; onChange(event.target.value)}
                      style={{ width: '100%' }}
                      value={filter ? filter.value : 'all'}
                  &gt;
                    &lt;option value="all"&gt;All&lt;/option&gt;
                    &lt;option value="3"&gt;3&lt;/option&gt;
                    &lt;option value="5"&gt;5&lt;/option&gt;
                  &lt;/select&gt;
              ),
              },
            ],
  </code></pre>
  
  <p>If I select Group1 in the first dropdown, the second dropdown needs to be enabled. However if the first dropdown is set to All then the dropdown 2 needs to be disabled. 
  How to implement the above?</p>