How can I put validation in react, that if I have choose an option from a drop down, then that optio-CodePudding

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>

CodePudding user response：

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}
            //