const updateCreateFormField = (e) => { const { name, value } = e.target;

setCreatForm({
  ...createForm,
  [name]: value,
})

console.log({ name, value });

};

//The onChange variable in the fields is updated on the above code. I am unable to find the solution towards making the below fields function properly. I tried using formik's setFieldValue however It didn't work

const formik = useFormik({
initialValues: {
  Name: "",
  Address: "",
  phoneNumber: "",
  Email: "",
}

})

The below code is the return function:

return (<div className="App">
     
{updateForm._id && (<div>
  <h2>Update Customer:</h2>
  <Box height={20} />
  <Formik initialValues={formik.initialValues}
    validationSchema={object({
      Name: string().required("Please enter a name").min(3, "Name is too short"),
      Address: string().required("Please enter an address").min(3, "Address is too short"),
      phoneNumber: number().required("Please enter a phone number").min(4, "Phone number is too short"),
      Email: string().required("Please enter an email").email("Invalid email"),
    })}
    onSubmit={(values, formikHelpers) => {
      console.log(values);
      formikHelpers.resetForm();
    }}
  >

    {({ errors, isValid, touched, dirty }) => (
      <Form onSubmit={updateCustomer}>

        <Field name="Name" type="name" as={TextField} variant="outlined" color="primary" label="Name" fullWidth
          onChange={handleUpdateFieldChange}
          value={updateForm.Name}
          error={Boolean(errors.Name) && Boolean(touched.Name)}
          helperText={Boolean(touched.Name) && errors.Name}
        />
        <Box height={14} />
        <Field name="Address" type="Address" as={TextField} variant="outlined" color="primary" label="Address" fullWidth
          onChange={handleUpdateFieldChange}
          value={updateForm.Address}
          error={Boolean(errors.Address) && Boolean(touched.Address)}
          helperText={Boolean(touched.Address) && errors.Address}
        />
        <Box height={14} />
        <Field name="phoneNumber" type="number" as={TextField} variant="outlined" color="primary" label="Phone Number" fullWidth
          error={Boolean(errors.phoneNumber) && Boolean(touched.phoneNumber)}
          helperText={Boolean(touched.phoneNumber) && errors.phoneNumber}
          onChange={handleUpdateFieldChange}
          value={updateForm.phoneNumber}
        />
        <Box height={14} />
        <Field name="Email" type="email" as={TextField} variant="outlined" color="primary" label="Email" fullWidth
          error={Boolean(errors.Email) && Boolean(touched.Email)}
          helperText={Boolean(touched.Email) && errors.Email}
          onChange={handleUpdateFieldChange}
          value={updateForm.Email}
        />
        <Box height={16} />
        <Button type="submit" variant="contained" color="primary" size="large" disabled={!dirty || !isValid} >Update Customer</Button>
      </Form>
    )}
  </Formik>
</div>)}

{!updateForm._id && <div>
  <h2>Create Customer:</h2>
  <Box height={20} />
  <Formik initialValues={formik.initialValues}
    validationSchema={object({
      Name: string().required("Please enter a name").min(3, "Name is too short"),
      Address: string().required("Please enter an address").min(3, "Address is too short"),
      phoneNumber: number().required("Please enter a phone number").min(4, "Phone number is too short"),
      Email: string().required("Please enter an email").email("Invalid email"),
    })}
    onSubmit={(values, formikHelpers) => {
      console.log(values);
      formikHelpers.resetForm();
    }}
  >

    {({ setFieldValue, errors, isValid, touched, dirty,handleBlur,handleSubmit}) => (
      <Form onSubmit={createCustomer} >

        <Field as={TextField} name="Name" type="name" variant="outlined" color="primary" label="Name" fullWidth
          onChange={updateCreateFormField} value={createForm.Name}
          error={Boolean(errors.Name) && Boolean(touched.Name)}
          helperText={Boolean(touched.Name) && errors.Name}
        />
        <Box height={14} />
        <Field name="Address" type="Address" as={TextField} variant="outlined" color="primary" label="Address" fullWidth
          error={Boolean(errors.Address) && Boolean(touched.Address)}
          helperText={Boolean(touched.Address) && errors.Address}
          onChange={updateCreateFormField} value={createForm.Address}
        />
        <Box height={14} />
        <Field name="phoneNumber" type="number" as={TextField} variant="outlined" color="primary" label="Phone Number" fullWidth
          error={Boolean(errors.phoneNumber) && Boolean(touched.phoneNumber)}
          helperText={Boolean(touched.phoneNumber) && errors.phoneNumber}
          onChange={updateCreateFormField}
          value={createForm.phoneNumber}
        />
        <Box height={14} />
        <Field name="Email" type="email" as={TextField} variant="outlined" color="primary" label="Email" fullWidth
          error={Boolean(errors.Email) && Boolean(touched.Email)}
          helperText={Boolean(touched.Email) && errors.Email}
          onChange={updateCreateFormField}
          value={createForm.Email}
        />
        <Box height={16} />
        <Button type="submit" variant="contained" color="primary" size="large" disabled={!dirty || !isValid} >Create Customer</Button>
      </Form>
    )}


  </Formik>
</div>}

<Box height={40} />

CodePudding user response：

Simply use Formik's handleChange event and values. You don't need to create custom functions or states to change values.

Working example here

Also, if you want to have custom function to have inside onChange you can use formik's setFieldValue.

More information related to formik events https://formik.org/docs/api/formik