Cant reset dynamic form on submit/modal close in formik

[jees47]

I cant reset my form on submit or modal close event using formik. I tried using resetForm({});, resetForm(initialValues),resetForm('') nothing works for me.

RestaurantDetails.js

setting initial values

  const setFromikInitialValue = (product_option_groups) => {
let updatedOption = product_option_groups;

product_option_groups.forEach((option, optionIndex) => {
  if (option.minimum === 1 && option.maximum === 1) {
    //If displaying radio buttons for modifier
    //selected option is kept in a key selected_modifier
    updatedOption[optionIndex] = {
      ...option,
      selected_modifier: option.product_options[0].id,
    };
  } else {
    //If displaying check box for modifier
    //selected_modifier_count key is added to track checked box count
    updatedOption[optionIndex] = {
      ...option,
      selected_modifier_count: 0,
    };
  }

  //For each check box selected key is added
  //selected is true if check box is checked & if unchecked it is false
  option.product_options.forEach((item, itemIndex) => {
    updatedOption[optionIndex].product_options[itemIndex] = {
      ...item,
      selected: false,
    };
  });
});
return updatedOption;
 };
 const initialValues = {
product_id: selectedFoodItem.id,
options: setFromikInitialValue(modifiersData),
};

render part of formik

{/* Modal */}
    <div
      className="modal fade dish-modal"
      id={`dishModal-${selectedFoodItem.id}`}
      tabIndex={-1}
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
      data-backdrop="static"
      data-keyboard="false"
    >
      <div className="modal-dialog" role="document">
        <div className="modal-content">
          <Formik
            initialValues={initialValues}
            enableReinitialize
            //form submition
            onSubmit={async (values, { setSubmitting, resetForm }) => {
              console.log(values);
              setSubmitting(false);
              resetForm(initialValues);
              window.$(`#dishModal-${selectedFoodItem.id}`).modal("hide");
            }}
            //yup form validation
            validationSchema={Yup.object().shape({
              options: Yup.array().of(
                Yup.object().shape({
                  selected_modifier_count: Yup.number()
                    .min(
                      Yup.ref("minimum"),
                      "minimum number of modifier not choosed"
                    )
                    .max(
                      Yup.ref("maximum"),
                      "maximum number of modifier exeded"
                    ),
                })
              ),
            })}
          >
            {({
              isSubmitting,
              setFieldValue,
              values,
              errors,
              touched,
              resetForm,
            }) => (
              <Form>
                <div className="modal-body">
                  <button
                    type="button"
                    className="close"
                    data-dismiss="modal"
                    aria-label="Close"
                    onClick={() => {
                      resetForm({});
                    }}
                  >
                    <span aria-hidden="true">×</span>
                  </button>

                  <div className="item-details">
                    <h4>{selectedFoodItem.name}</h4>
                    <h4>
                      {dollar}
                      {selectedFoodItem.price}
                    </h4>
                  </div>

                  <div className="modifiers">
                    {/* mapping modifier items */}
                    {values.options && values.options.length
                      ? values.options.map((modifier, optionIndex) => (
                          <div
                            key={`${modifier.id}-${optionIndex}`}
                            className="modifiers"
                          >
                            <h5>{modifier.name}</h5>
                            <h6>
                              {modifier.minimum || modifier.maximum ? (
                                errors.options && touched.options ? (
                                  errors.options[optionIndex] &&
                                  touched.options[optionIndex] ? (
                                    <span className="text-danger">
                                      Minimum {modifier.minimum} Maximum{" "}
                                      {modifier.maximum}
                                    </span>
                                  ) : (
                                    <span>
                                      Minimum {modifier.minimum} Maximum{" "}
                                      {modifier.maximum}
                                    </span>
                                  )
                                ) : (
                                  <span>
                                    Minimum {modifier.minimum} Maximum{" "}
                                    {modifier.maximum}
                                  </span>
                                )
                              ) : (
                                <span className="text-danger">
                                  Minimum {modifier.minimum} Maximum{" "}
                                  {modifier.maximum}
                                </span>
                              )}

                              {modifier.minimum > 0 ? (
                                <span className="badge badge-light float-right">
                                  Required
                                </span>
                              ) : null}
                            </h6>

                            <ul>
                              {modifier.minimum === 1 &&
                              modifier.maximum === 1
                                ? modifier.product_options.map(
                                    (item, itemIndex) => (
                                      <li key={itemIndex}>
                                        <div className="form-check">
                                          <input
                                            defaultChecked={
                                              itemIndex === 0 ? true : false
                                            }
                                            className="form-check-input"
                                            type="radio"
                                            name="temp"
                                            id={`exampleCheck${item.id}`}
                                            onChange={(
                                              event,
                                              value = item.id
                                            ) => {
                                              setFieldValue(
                                                `options[${optionIndex}]`,
                                                {
                                                  ...modifier,
                                                  selected_modifier: value,
                                                }
                                              );
                                            }}
                                          />

                                          <label
                                            className="form-check-label"
                                            htmlFor={`exampleCheck${item.id}`}
                                          >
                                            {item.name}
                                            <span>
                                              {dollar}
                                              {item.price}
                                            </span>
                                          </label>
                                        </div>
                                      </li>
                                    )
                                  )
                                : modifier.product_options.map(
                                    (item, itemIndex) => (
                                      <li key={`${item.id}-${itemIndex}`}>
                                        <div className="form-check">
                                          <input
                                            type="checkbox"
                                            className="form-check-input"
                                            id={`exampleCheck${item.id}`}
                                            onClick={() => {
                                              if (!item.selected) {
                                                setFieldValue(
                                                  `options[${optionIndex}]`,
                                                  {
                                                    ...modifier,
                                                    selected_modifier_count:
                                                      modifier.selected_modifier_count
                                                        ? modifier.selected_modifier_count +
                                                          1
                                                        : 1,
                                                  }
                                                );
                                              } else {
                                                setFieldValue(
                                                  `options[${optionIndex}]`,
                                                  {
                                                    ...modifier,
                                                    selected_modifier_count:
                                                      modifier.selected_modifier_count -
                                                      1,
                                                  }
                                                );
                                              }
                                              setFieldValue(
                                                `options[${optionIndex}][product_options][${itemIndex}]`,
                                                {
                                                  ...item,
                                                  selected: !item.selected,
                                                }
                                              );
                                            }}
                                            defaultChecked={
                                              item.selected ? true : false
                                            }
                                          />

                                          <label
                                            className="form-check-label"
                                            htmlFor={`exampleCheck${item.id}`}
                                          >
                                            {item.name}
                                            <span>
                                              {dollar}
                                              {item.price}
                                            </span>
                                          </label>
                                        </div>
                                      </li>
                                    )
                                  )}
                            </ul>
                          </div>
                        ))
                      : null}
                  </div>

                  <button
                    type="submit"
                    className="btn btn-primary continue-btn"
                    // disabled={isSubmitting || !dirty}
                  >
                    Continue
                  </button>
                </div>
              </Form>
            )}
          </Formik>
        </div>
      </div>
    </div>
    {/* Modal end */}

[subhamX]

Hi did you find any solution to it?
I am also having a similar requirement where there is a dynamic form which I am rendering as a Dialog (or Modal). For now, I am resetting the state explicitly(of parent component) and then making the dialog force re-render (which isn't good).

Currently looking for some alternate options. Do share if you have any. Thank you.

[Alpha-T30]

How you are doing this force re-render to clear the formik form on closing the modal ?

[onesneakymofo]

Here's how you do this via a re-render:

Let's say you have three links that where you want to edit the thing inside of a single modal / form.

First we're going to set some state on our App

const App = () => {
  const [showModal, setShowModal] = useState(false)
  const [thing, setThing] = useState('')
  ...
}

In our app, here's our three links that open the modal and set the thing:

 <a href="#" onClick={() => { setShowModal(true); setThing('foo')}}>
 <a href="#" onClick={() => { setShowModal(true); setThing('bar')}}>
 <a href="#" onClick={() => { setShowModal(true); setThing('baz')}}>

Also in the app, let's add the modal where we pass down setThing, setShowModal, and showModal.

<MyCoolModal setThing={setThing} setShowModal={setShowModal} showModal={showModal} />

In your modal component, pass thing down to your form and make sure to reset the thing's state when you click close:

const MyCoolModal = ({setThing, setShowModal, showModal}) => (
  <Modal show={showModal}>
    <ParentForm thing={thing}>
    <Modal.Footer>
      <Button onClick={ () => { setThing('');  setShowModal(false) } }>Close</Button>
    </Modal.Footer>
  </Modal>
)

Inside of ParentForm, use thing as part of initialization of your form and also set enableReinitialize:

const ParentForm = ({ thing }) => {
  const initialFormValues = {thing: thing}

  return (
    <Formik
      enableReinitialize
      initialValues={{ initialFormValues }}
     ...

Now when you click the close button on the modal, it will set the thing to empty and re-initialize the form once you click a different link.