I need to set Fields to initial state after data added in table field onClick

Question

I want to set all TextField to the initial state after adding data to the table by clicking ADD button

I am able to set that to the initial state by using AssignSearchesForm.resetForm(); but what happens here if I set this in add button click it will reset data but my table data also get removed because it's updated Formik values setTeamData([values, ...teamdata]);

I am adding Formik value in this state after onClick it will get added but if I reset form and set initial this state value also getting set empty so what I want after adding data into table TextField get reset or initial but table data will stay the same either if we do not update that

This way I am trying

          <Button
            onClick={() => {
              AssignSearchesForm.handleSubmit();
              // I tried this two way
              //first way
              // AssignSearchesForm.resetForm();

              //second way
              // AssignSearchesForm.setFieldValue("selectName","")
              // AssignSearchesForm.setFieldValue("selectAge","")
              // AssignSearchesForm.setFieldValue("location","")
            }}
            variant="contained"
          >
            Add
          </Button>

export default function App() {
  const [teamdata, setTeamData] = React.useState([]);

  const AssignSearchesForm = useFormik({
    initialValues: {
      selectName: "",
      selectAge: "",
      location: ""
    },
    validationSchema,
    onSubmit: (values) => {
      setTeamData([values, ...teamdata]);
    }
  });

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

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

  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}
            error={
              AssignSearchesForm.errors.selectName &&
              AssignSearchesForm.touched.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}>
          <TextField
            id="outlined-basic"
            label="Select Age"
            name="selectAge"
            size="small"
            {...AssignSearchesForm.getFieldProps("selectAge")}
          />
        </Grid>
        <Grid item xs={4}>
          <Button
            onClick={() => {
              AssignSearchesForm.handleSubmit();
              // AssignSearchesForm.resetForm();
              // AssignSearchesForm.setFieldValue("selectName","")
              // AssignSearchesForm.setFieldValue("selectAge","")
              // AssignSearchesForm.setFieldValue("location","")
            }}
            variant="contained"
          >
            Add
          </Button>
        </Grid>
      </Grid>

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

Answer 1

You can leverage the second parameter formikHelper in onSubmit function of formik.

Better approach pointed out by dev-developer in comments:

onSubmit: (values, formikHelper) => {
      setTeamData([values, ...teamdata]);
      formikHelper.resetForm();
    }

Another alternative approach if resetForm() is not useful.

onSubmit: (values, formikHelper) => {
      setTeamData([values, ...teamdata]);
      formikHelper.setFieldValue("selectName", "");
      formikHelper.setFieldValue("selectAge", "");
      formikHelper.setFieldValue("location", "");
    }

Here is the modified code sandbox