Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

I want to remove item in the list if that item already added to table

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>
  );
}

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

This should do what you’re asking:

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading