Passing a Formik prop from a Form to a Child component

user_18588604 0
Viewed 156

I'm trying to modularize as much as I can a Formik huge formulary and I'm having some trouble dealing with the onSubmit function. I'm not sure how to pass Formik's (resetForm) prop to the child component, any suggestions?

(I simplified the following code, since dealing with resetForm is the only problem I found)

Code:

    <Formik
      initialValues={formInitialValues}

      validate={values => formValidators(values)}

      onSubmit={(values, { resetForm }) => {
        dispatch(postCreate(values))
        resetForm()
      }}
    >

What I want to do is something similar to what I did with "validate".

prop formik reactjs parent forms
1 Answers

Component <Formik>'s child function has single argument props, which includes handleReset():

In the following example, handleReset() is destructured and passed into another child.

<Formik
  initialValues={{ name: "" }}
  onSubmit={async values => {
    // dispatch(postCreate(values))
    console.log({values})
  }}
>
  {({
      values,
      dirty,
      isSubmitting,
      handleChange,
      handleSubmit,
      handleReset
    }) => {
    return (
      <form onSubmit={handleSubmit}>
        <input
          id="name"
          type="text"
          value={values.name}
          onChange={handleChange}
        />
        <button
          type="button"
          className="outline"
          onClick={handleReset}
          disabled={!dirty || isSubmitting}
        >
          Reset
        </button>
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </form>
    );
  }}
</Formik>

Live Demo

user_19094990
Related