Formik catch-22 - reactjs

Question

I'm new to React and I've run into a catch 22 situation when using Formik that I seem to have a mental block with. If I use withFormik() then my component can't use hooks in its submit handler.
import React, { useEffect } from "react";
import { Form, Field, withFormik } from "formik";
import { useDatabase, useAlerts } from "./Hooks";
const MyForm = props => {
const { resetForm, dirty, isSubmitting, setSubmitting } = props;
const { loadData, saveData } = useDatabase();
const { success } = useAlerts();
const reset = data => resetForm({ values: data });
useEffect(() => {
loadData().then(data => reset(data));
}, []);
// Problem: How can I execute this on submit?
const handleSubmit = async values => {
await saveData(values);
reset(values);
success("Values saved");
setSubmitting(false);
};
return (
<Form>
<h1>Catch 22</h1>
<Field
name="firstName"
placeholder="First name"
readOnly={isSubmitting}
/>
<Field name="lastName" placeholder="Last name" readOnly={isSubmitting} />
<input disabled={!dirty} type="submit" />
<input type="reset" />
</Form>
);
};
export default withFormik({
mapPropsToValues: () => ({
firstName: "",
lastName: ""
}),
enableReinitialize: true,
handleSubmit: () => {
// Has no access to saveData() and success() hook methods
}
})(MyForm);
https://codesandbox.io/s/sleepy-blackburn-q1mt4?file=/src/MyForm.js
Alternatively if I don't use withFormik then I can't reset the form when my data has loaded because I don't have a reference to resetForm.
import React, { useEffect } from "react";
import { Form, Field, Formik } from "formik";
import { useDatabase, useAlerts } from "./Hooks";
const MyForm = props => {
const { loadData, saveData } = useDatabase();
const { success } = useAlerts();
// Problem: how can I reset the form on data load?
useEffect(() => {
loadData().then(data => resetForm({ values: data }));
}, []);
const initialValues = {
firstName: "",
lastName: ""
};
const handleSubmit = async (values, { setSubmitting, resetForm }) => {
await saveData(values);
resetForm({ values });
success("Values saved");
setSubmitting(false);
};
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
enableReinitialize={true}
>
{({ isSubmitting, dirty }) => (
<Form>
<h1>Catch 22</h1>
<Field
name="firstName"
placeholder="First name"
readOnly={isSubmitting}
/>
<Field
name="lastName"
placeholder="Last name"
readOnly={isSubmitting}
/>
<input disabled={!dirty} type="submit" />
<input type="reset" />
</Form>
)}
</Formik>
);
};
export default MyForm;
https://codesandbox.io/s/hardcore-sound-048wf?file=/src/MyForm.js
What would be the best way to do this?

Answer 1

It seems that writing out the problem triggered some mind-cogs to start turning and I came up with a possible solution.
I introduced a context like this...
import React, { useState, useContext } from "react";
import { useDatabase } from "./Hooks";
export const DataContext = React.createContext(null);
export const DataContextConsumer = DataContext.Consumer;
export const useDataContext = () => useContext(DataContext);
export const DataContextProvider = props => {
const [data, setData] = useState({
firstName: "",
lastName: ""
});
const { loadData, saveData } = useDatabase();
const load = async () => setData(await loadData());
const save = async newData => await saveData(newData);
const contextValues = { load, save, data };
return (
<DataContext.Provider value={contextValues}>
{props.children}
</DataContext.Provider>
);
};
export const withDataContext = () => WrappedComponent => props => (
<DataContextProvider>
<WrappedComponent {...props} />
</DataContextProvider>
);
export default {
DataContext,
DataContextConsumer,
DataContextProvider,
useDataContext,
withDataContext
};
And then passed its data to Formik's initialValues. Now Formik gets the new values on load and I can call the save hooks in the submit hander.
import React, { useEffect } from "react";
import { Form, Field, Formik } from "formik";
import { withDataContext, useDataContext } from "./DataContext";
import { useAlerts } from "./Hooks";
const MyForm = () => {
const { load, save, data } = useDataContext();
const { success } = useAlerts();
useEffect(() => {
load();
}, []);
const handleSubmit = async (values, { setSubmitting, resetForm }) => {
await save(values);
resetForm({ values });
success("Values saved " + JSON.stringify(values));
setSubmitting(false);
};
return (
<Formik
initialValues={data}
onSubmit={handleSubmit}
enableReinitialize={true}
>
{({ isSubmitting, dirty }) => (
<Form>
<h1>Catch 22</h1>
<Field
name="firstName"
placeholder="First name"
readOnly={isSubmitting}
/>
<Field
name="lastName"
placeholder="Last name"
readOnly={isSubmitting}
/>
<input disabled={!dirty} type="submit" />
<input type="reset" />
</Form>
)}
</Formik>
);
};
export default withDataContext()(MyForm);
https://codesandbox.io/s/throbbing-cache-txnit?file=/src/MyForm.js
Perhaps this is a classic case of solving a React problem by lifting state.

Answer 2

You can lift the form inside the render prop for formik up into a new component allowing you to use hooks inside it. Now you can move the loadData effect into the lifted form and know that you are now defining the effect inside of both scopes where you can get access to resetForm via the render props and loadData via the useDatabase hook.
const LiftedForm = ({ isSubmitting, dirty, resetForm }) => {
const { loadData } = useDatabase();
useEffect(() => {
loadData().then((data) => resetForm({ values: data }));
}, [loadData, resetForm]);
return (
<Form>
<h1>Catch 22</h1>
<Field
name="firstName"
placeholder="First name"
readOnly={isSubmitting}
/>
<Field name="lastName" placeholder="Last name" readOnly={isSubmitting} />
<input disabled={!dirty} type="submit" />
<input type="reset" />
</Form>
);
};
and passing the formik bag via the render props right to the new lifted form component.
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
enableReinitialize={true}
>
{(props) => <LiftedForm {...props} />}
</Formik>
The handleSubmit needs no changing because it already receives everything it needs in the callback and has access to saveData and success via hooks.
const { saveData } = useDatabase();
const { success } = useAlerts();
const handleSubmit = async (values, { setSubmitting, resetForm }) => {
await saveData(values);
resetForm({ values });
success("Values saved");
setSubmitting(false);
};
the codesandbox for that