My task is I need to filter only users from the list what I am doing is I have one field called Select Name in which I have a name list so if I select any name from the list in that I have some data in that data I need to filter only users that users I need to show in another filed called username but right now what happens if I select any one name from the first field in second TextField all the data is shown but I need to show only present users in that list in handleChange function I am performing it...

export default function App() {
  const AssignSearchesForm = useFormik({
    initialValues: {
      selectName: "",
      username: []
    },
    onSubmit: (values) => {
      console.log(values);
    }
  });

  const handleChange = (e) => {
    const selectedName = e.target.value;
    const name = nameList.find((data) => data.selectName === selectedName);
    const newOptions = Object.values(name).reduce((optionList, key) => {
      // if(Object.keys(name) === "user"){
      //   optionList.push({ value: key, label: key });
      // }
      optionList.push({ value: key, label: key });
      return optionList;
    }, []);
    AssignSearchesForm.setFieldValue("selectName", selectedName);
    AssignSearchesForm.setFieldValue("username", newOptions);
  };
  console.log(AssignSearchesForm?.values?.username);
  return (
    <div className="App">
      <Card color="primary" variant="outlined">
        <Grid
          sx={{
            mt: 1
          }}
          container
          direction="row"
          spacing={3}
        >
          <Grid item xs={4}>
            <TextField
              sx={{ minWidth: 170 }}
              select
              id="outlined-basic"
              label="Select Name"
              name="selectName"
              size="small"
              onChange={handleChange}
              value={AssignSearchesForm.values.selectName}
            >
              {nameList?.map((option) => (
                <MenuItem key={option.selectName} value={option.selectName}>
                  {option.selectName}
                </MenuItem>
              ))}
            </TextField>
          </Grid>
          <Grid item xs={4}>
            <TextField
              sx={{ minWidth: 170 }}
              select
              id="outlined-basic"
              label="username"
              name="username"
              size="small"
              {...AssignSearchesForm.getFieldProps("username")}
            >
              {AssignSearchesForm?.values?.username.length ? (
                AssignSearchesForm?.values?.username?.map((option) => (
                  <MenuItem key={option.value} value={option.value}>
                    {option.value}
                  </MenuItem>
                ))
              ) : (
                <MenuItem disabled>Please first select name</MenuItem>
              )}
            </TextField>
          </Grid>
          <Grid item xs={4}>
            <Button
              onClick={() => {
                AssignSearchesForm.handleSubmit();
              }}
              variant="contained"
            >
              Add
            </Button>
          </Grid>
        </Grid>
      </Card>
    </div>
  );
}

CodeSandBox Link

CodePudding user response：

Please add this code in change handler.

const handleChange = (e) => {
    const selectedName = e.target.value;
    const name = nameList.find((data) => data.selectName === selectedName);
    const newOptions = Object.values(name).reduce((optionList, key) => {
      // if(Object.keys(name) === "user"){
      //   optionList.push({ value: key, label: key });
      // }
      if (key != null && key.toString().includes("user"))
        optionList.push({ value: key, label: key });
      return optionList;
    }, []);
    AssignSearchesForm.setFieldValue("selectName", selectedName);
    AssignSearchesForm.setFieldValue("username", newOptions);
  };

CodePudding user response：

You need to use Object.keys with filter predicate to get only those properties.

const handleChange = (e) => {
    const selectedName = e.target.value;
    const name = nameList.find((data) => data.selectName === selectedName);
        
    const newOptions = Object.keys(name).filter(f =>  f.match(/user\d /)).map(f =>  ({ value: f, label: f }));
    console.log(newOptions);
    AssignSearchesForm.setFieldValue("selectName", selectedName);
    AssignSearchesForm.setFieldValue("username", newOptions);
  };

I've used regex to match user<any digit>. You can update that regex as per your requirement.