Skip to content
Advertisement

How can I put validation in react, that if I have choose an option from a drop down, then that option will be disable in the other drop down menu

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>
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement