I want to reset value to initial value formik

I am getting some value from the backend and I am string in state and using throw formik what my task is I create reset onClick so like if I edit something but I don’t want to use it then if I click on reset onClick then it set to initial value and I create one state and update that in onClick but if I am checking in the console I am getting initial value but in UI nothing happening see image for reference

const [formValue, setFormValue] = useState(null);
  useEffect(() => {
    fetchSearchRule(rules);
  }, []);
  let initialValues = {
    exactNameMatch: rules.exactNameMatch,
    partialNameMatch: rules.partialNameMatch,
    partialNameMatchThreshold: rules.partialNameMatchThreshold,
    exactDOBMatch: rules.exactDOBMatch,
    partialDOBMatch: rules.partialDOBMatch,
    partialDOBMatchThreshold: rules.partialDOBMatchThreshold,
    countryMatch: rules.countryMatch,
    zipCodeMatch: rules.zipCodeMatch,
    completeAddressMatch: rules.completeAddressMatch,
    partialAddressMatchThreshold: 50,
    allSanctionsList:checked,
    FormChangeCount: 0,
  };

  const ruleForm = useFormik({
    initialValues,
    enableReinitialize: true,
    onSubmit: (values) => {
      updateSearchRules(values);
      setChangeRuleSettings(false);
      ruleForm.values.FormChangeCount = 0;
    },
  });

                <Box>
                  <Typography
                    onClick={() => {setFormValue(initialValues)
                      setChangeRuleSettings(false);
                    }}
                    color="secondary"
                    variant="subtitle2"
                    style={{ cursor: "pointer" }}
                  >
                    Reset Rule
                  </Typography>
                </Box>

Answer

I find it a bit difficult to understand what you’re asking, but I’ll try to answer. If all you want is to reset the entire form when the user clicks on the text Reset Rule, then use Formik’s function resetForm:

<Box>
    <Typography
        onClick={ruleForm.resetForm}
        color="secondary"
        variant="subtitle2"
        style={{ cursor: "pointer" }}
    >
    Reset Rule
    </Typography>
</Box>

If you want to reset some values in the form but not all, pass in those input names to resetForm():

onClick={()=>{
  ruleForm.resetForm({
    values: {
      partialDOBMatchThreshold: rules.partialDOBMatchThreshold
    }
  })
}}

Also, remove formValue from state, there is no need for it.

Advertisement

Answer