I am designing a form in react in which I have two categories of dropdown. one is named as “What include” and the other is “What is not include”. Now I want that if the user to select any option from the menu of “What Include”, then that option(item) will be disabled in the other drop-down named “What not Include”.
Here is the code for handle change and UI:
const [personwhatIncludeItems, setPersonwhatIncludeItems] = React.useState( [] ); const [personnotIncludeItems, setPersonnotIncludeItems] = React.useState([]); const handlenotIncludeItemsChange = (event) => { const { target: { value }, } = event; setPersonnotIncludeItems( // On autofill we get a stringified value. typeof value === "string" ? value.split(",") : value ); }; const handlewhatIncludeItemsChange = (event) => { const { target: { value }, } = event; setPersonwhatIncludeItems( // On autofill we get a stringified value. typeof value === "string" ? value.split(",") : value ); }; <div className="col-6 mt-2 mb-2"> <FormControl fullWidth> <InputLabel id="multiple-include-label"> {" "} Includes </InputLabel> <Select labelId="whatInclude-multiple-checkbox-label" id="whatInclude-multiple-checkbox" multiple value={personwhatIncludeItems} onChange={handlewhatIncludeItemsChange} input={<OutlinedInput label="Tag" />} renderValue={(selected) => selected.join(", ")} MenuProps={MenuProps} > {whatIncludeArr.map((whatIncludeItems) => ( <MenuItem key={whatIncludeItems} value={whatIncludeItems} > <Checkbox checked={ personwhatIncludeItems.indexOf( whatIncludeItems ) > -1 } /> <ListItemText primary={whatIncludeItems} /> </MenuItem> ))} </Select> </FormControl> </div> <div className="col-6 mt-2 mb-2"> <FormControl fullWidth> <InputLabel id="multiple-not-include-label"> {" "} Not Includes </InputLabel> <Select labelId="whatnotInclude-multiple-checkbox-label" id="whatnotInclude-multiple-checkbox" multiple value={personnotIncludeItems} onChange={handlenotIncludeItemsChange} input={<OutlinedInput label="Not Include" />} renderValue={(selected) => selected.join(", ")} MenuProps={MenuProps} > {WhatNotIncludeArr.map((notIncludeItems) => ( <MenuItem key={notIncludeItems} value={notIncludeItems} > <Checkbox checked={ personnotIncludeItems.indexOf(notIncludeItems) > -1 } /> <ListItemText primary={notIncludeItems} /> </MenuItem> ))} </Select> </FormControl> </div>
Advertisement
Answer
Not sure if I fully understand the logic, but if the goal is to disable the options if selected else where, perhaps consider to add conditional disabled
for each mapped option (if the other selected state already has the value, disable the option), perhaps such as:
Minimized demo of below example: stackblitz
Although not tagged as it, the posted code looks like MUI so the example will use MUI components, but otherwise the approach could still work with other libraries provided that a disabled
property is supported.
“What Include” select:
<div className="col-6 mt-2 mb-2"> <FormControl fullWidth> <InputLabel id="multiple-include-label"> Includes</InputLabel> <Select labelId="whatInclude-multiple-checkbox-label" id="whatInclude-multiple-checkbox" multiple value={personwhatIncludeItems} onChange={handlewhatIncludeItemsChange} input={<OutlinedInput label="Tag" />} renderValue={(selected) => selected.join(", ")} MenuProps={MenuProps} > {whatIncludeArr.map((whatIncludeItems) => ( <MenuItem key={whatIncludeItems} value={whatIncludeItems} // 👇 Added disable condition here disabled={personnotIncludeItems.includes(whatIncludeItems)} > <Checkbox checked={personwhatIncludeItems.indexOf(whatIncludeItems) > -1} // 👇 Added disable condition here disabled={personnotIncludeItems.includes(whatIncludeItems)} /> <ListItemText primary={whatIncludeItems} /> </MenuItem> ))} </Select> </FormControl> </div>
“What is not include” select:
<div className="col-6 mt-2 mb-2"> <FormControl fullWidth> <InputLabel id="multiple-not-include-label"> Not Includes</InputLabel> <Select labelId="whatnotInclude-multiple-checkbox-label" id="whatnotInclude-multiple-checkbox" multiple value={personnotIncludeItems} onChange={handlenotIncludeItemsChange} input={<OutlinedInput label="Not Include" />} renderValue={(selected) => selected.join(", ")} MenuProps={MenuProps} > {WhatNotIncludeArr.map((notIncludeItems) => ( <MenuItem key={notIncludeItems} value={notIncludeItems} // 👇 Added disable condition here disabled={personwhatIncludeItems.includes(notIncludeItems)} > <Checkbox checked={personnotIncludeItems.indexOf(notIncludeItems) > -1} // 👇 Added disable condition here disabled={personwhatIncludeItems.includes(notIncludeItems)} /> <ListItemText primary={notIncludeItems} /> </MenuItem> ))} </Select> </FormControl> </div>