title: Resetting form fields to initial state in React
body: <p>I'm currently working on a form (Material-UI) that users fill in to log a set they did for an exercise. Upon submission, it will run a GraphQL mutation. As I also have login and register functionalities that share similarities, I created a form hook for these. The login and register do not need to be reset, as this is done by redirecting them to the home page. However, for the logging set functionality, I want the modal (where the form is) to close after resetting the form back to it's initial state, so that when they choose to log another set, the form does not contain the values from the previous logged set.</p>
  <p><strong>Form</strong></p>
  <pre><code>const initialState = {
    exerciseName: &quot;&quot;,
    weight: undefined,
    reps: undefined,
    notes: &quot;&quot;,
  };
  
  function MyModal() {
    const [errors, setErrors] = useState({});
  
    const { onChange, onSubmit, values } = useForm(registerSet, initialState);
  
    const [addSet] = useMutation(ADD_SET, {
      update() {
        // need to reset form to initial state here
        handleClose();
      },
      onError(err) {
        setErrors(err.graphQLErrors[0].extensions.exception.errors);
      },
      variables: values,
    });
  
    function registerSet() {
      addSet();
    }
  
    return (
      &lt;form
        onSubmit={onSubmit}
        id=&quot;addSetForm&quot;
        noValidate
        autoComplete=&quot;off&quot;
      &gt;
        &lt;TextField
          name=&quot;exerciseName&quot;
          label=&quot;Exercise Name&quot;
          select
          value={values.exerciseName}
          error={errors.exerciseName ? true : false}
          onChange={onChange}
        &gt;
          &lt;MenuItem key=&quot;Bench Press&quot; value=&quot;Bench Press&quot;&gt;
            Bench Press
          &lt;/MenuItem&gt;
  
          &lt;MenuItem key=&quot;Deadlift&quot; value=&quot;Deadlift&quot;&gt;
            Deadlift
          &lt;/MenuItem&gt;
  
          &lt;MenuItem key=&quot;Squat&quot; value=&quot;Squat&quot;&gt;
            Squat
          &lt;/MenuItem&gt;
        &lt;/TextField&gt;
  
        &lt;Grid container spacing={1}&gt;
          &lt;Grid item xs={6}&gt;
            &lt;TextField
              name=&quot;weight&quot;
              label=&quot;Weight&quot;
              type=&quot;number&quot;
              value={values.weight}
              error={errors.weight ? true : false}
              onChange={onChange}
            /&gt;
          &lt;/Grid&gt;
  
          &lt;Grid item xs={6}&gt;
            &lt;TextField
              name=&quot;reps&quot;
              label=&quot;Reps&quot;
              type=&quot;number&quot;
              value={values.reps}
              error={errors.reps ? true : false}
              onChange={onChange}
            /&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
  
        &lt;TextField
          name=&quot;notes&quot;
          label=&quot;Notes (Optional)&quot;
          type=&quot;text&quot;
          multiline={true}
          rows=&quot;4&quot;
          value={values.notes}
          onChange={onChange}
        /&gt;
      &lt;/form&gt;
    )
  }
  </code></pre>
  <p><strong>useForm Hook</strong></p>
  <pre><code>export const useForm = (callback, initialState = {}) =&gt; {
    const [values, setValues] = useState(initialState);
  
    const onChange = (event) =&gt; {
      setValues({
        ...values,
        [event.target.name]:
          event.target.type === &quot;number&quot;
            ? parseInt(event.target.value)
            : event.target.value,
      });
    };
  
    const onSubmit = (event) =&gt; {
      event.preventDefault();
      callback();
    };
  
    return {
      onChange,
      onSubmit,
      passwordVisibility,
      confirmPasswordVisibility,
      values,
    };
  };
  
  </code></pre>
  <p>I'm not sure how I can access <code>setValues</code> from the <code>useForm</code> hook in the <code>update()</code> handler for <code>useMutation</code> to reset the form back to it's initial state.</p>