How to disable dropdown when a specific option is selected in React?
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>
Related videos on Youtube
SeaWarrior404
Updated on September 20, 2020Comments
-
SeaWarrior404 over 3 years
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?
-
rawrstar almost 4 yearshow to rest names on select of '3' from the list
-
Sagiv b.g almost 4 years@user1997 what do you mean, like reset the
selectedName
? You can do that logic inonNumbersChange
handler and update theselectedName
ifselectedNumber
is 3