Question

150

How to disable dropdown when a specific option is selected in React?

rated 0 times [ 156] [ 6] / answers: 1 / hits: 23648 / 7 Years ago, wed, september 20, 2017, 12:00:00

I have implemented a table using React Table(https://react-table.js.org). 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.

I have implemented the basic filter dropdown as follows:

    {

              Header: 'Name',

              accessor: 'Name',

              id: 'Name',

              Cell: ({ value }) =>

              value === 'group1' ? 'group1' : 'group2',

              filterMethod: (filter, row) => {

                if (filter.value === 'all') {

                  return true;

                }

                if (filter.value === 'group1') {

                  return row[filter.id] === 'group1';

                }

              },

              Filter: ({ filter, onChange }) => (

                <select

                    onChange={event => onChange(event.target.value)}

                    style={{ width: '100%' }}

                    value={filter ? filter.value : 'all'}

                >

                  <option value=all>All</option>

                  <option value=group1>Group1</option>

                </select>

            ),

            },

            {

              filterable: ({ val }) => {

                  if (tenantName.value === 'group1') {

                    return true;

                  }

                  else {

                    return false;

                  }

              },

              Header: 'ID',

              accessor: 'Id',

              id: 'Id',

              Cell: ({ value }) => (value === '3' ? '3' : '5'),

              filterMethod: (filter, row) => {

                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 }) => (

                <select

                    onChange={event => onChange(event.target.value)}

                    style={{ width: '100%' }}

                    value={filter ? filter.value : 'all'}

                >

                  <option value=all>All</option>

                  <option value=3>3</option>

                  <option value=5>5</option>

                </select>

            ),

            },

          ],

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janjadonb

Add To Favorites

Follow

Total Points: 4

Total Questions: 114

Total Answers: 118

Location: Mali

Member since Fri, Dec 3, 2021

3 Years ago

janjadonb questions

1 How to execute slickNext method in react-slick carousel?

Tue, Nov 10, 20, 00:00, 4 Years ago

1 How to set focus on custom input in ReactJS using useRef and react hooks?

Fri, Oct 23, 20, 00:00, 4 Years ago

1 React Router scroll page to the top after transition

Wed, Oct 14, 20, 00:00, 4 Years ago

1 Vue3 Creating Component Instances Programmatically on button click

Wed, Oct 7, 20, 00:00, 4 Years ago

1 How to create array of strings in VueJS?

Tue, Apr 14, 20, 00:00, 4 Years ago

View All

answered 7 Years ago ninaemiliaj · Accepted Answer

You can manage the selected values in a parent component and pass a disabled prop according to your condition.

For example, in the example below we have 2 DropDown components

With the numbers array

With the names array

If the user select the number 3 from the numbers drop down, this will make the names drop down to be disabled.

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

      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>