I am adding data into the table after submitting so what my task is I need to check any item that adds to the table mean that is present in the table that that select name object will remove from Select Name I am trying to remove that list using filteredArray function check that code below but it not working properly so if that name is present in the table then that name will not show in select name TextFiled need to remove that already select and added in the table

export default function App() {
  const nameList = [
    {
      selectName: "onee",
      selectAge: "18",
      location: "nagpur"
    },
    {
      selectName: "two",
      selectAge: "20",
      location: "pune"
    },
    {
      selectName: "three",
      selectAge: "20",
      location: "mumbai"
    }
  ];
  const [teamdata, setTeamData] = React.useState([]);

  const AssignSearchesForm = useFormik({
    initialValues: {
      selectName: "",
      selectAge: "",
      location: ""
    },
    onSubmit: (values) => {
      setTeamData([values, ...teamdata]);
    }
  });
  const handleChange = (e) => {
    const selectedName = e.target.value;
    const name = nameList.find((data) => data.selectName === selectedName);
    const newOptions = Object.values(name).reduce((optionList, key) => {
      optionList.push({ value: key, label: key });
      return optionList;
    }, []);
    AssignSearchesForm.setFieldValue("selectName", selectedName);
    AssignSearchesForm.setFieldValue("selectAge", newOptions[1]?.value || "");
    AssignSearchesForm.setFieldValue("location", newOptions[2]?.value || "");
  };
  let filteredArray = nameList.filter(
    (e) => e.selectName !== teamdata.map((data) => data.selectName)
  );
  console.log("filteredArray", filteredArray);

  return (
    <div className="App">
      <Grid container direction="row" spacing={1}>
        <Grid item xs={4}>
          <TextField
            sx={{ minWidth: 150 }}
            select
            id="outlined-basic"
            label="Select Name"
            name="selectName"
            size="small"
            onChange={handleChange}
            value={AssignSearchesForm.values.selectName}
          >
            {filteredArray?.map((option) => (
              <MenuItem key={option.selectName} value={option.selectName}>
                {option.selectName}
              </MenuItem>
            ))}
          </TextField>
        </Grid>
        <Grid item xs={4}>
          <TextField
            id="outlined-basic"
            label="location"
            name="location"
            size="small"
            {...AssignSearchesForm.getFieldProps("location")}
          />
        </Grid>
        <Grid item xs={4}>
          <Button
            onClick={() => {
              AssignSearchesForm.handleSubmit();
            }}
            variant="contained"
          >
            Add
          </Button>
        </Grid>
      </Grid>

      <Table teamdata={teamdata} />
    </div>
  );
}

CodePudding user response：

This should do what you're asking:

  let filteredArray = nameList.filter(
    (e) => !teamdata.some(data => data.selectName === e.selectName)
  );