title: Discarding changes when using Formik with React
body: <p>I am using <code>Formik</code> form with React. Whenever the user submits (handleSubmit), I put an option whether or not to discard the change or keep the change.</p>
  
  <p>In my render,</p>
  
  <pre><code>      &lt;Formik
          initialValues={this.state.experiment}
          onSubmit={this.handleSubmit}
          component={formikProps =&gt; (
            &lt;ExperimentForm {...formikProps} submitText="Save Changes" /&gt;
          )}
        /&gt;
  </code></pre>
  
  <p><strong>handleSubmit()</strong></p>
  
  <pre><code>  handleSubmit(formdata: any, actions: any) {
      const data = processFormData(formdata);
  
      let changes = this.detectChanges(this.state.experiment, data);
  
      this.setState({ tempFormData: data });
      // changed field exists
      if (changes.length !== 0) {
  
        this.setState({ 
          isDialogOpen: true,
          changedFields: changes,
        });
  
      } else {
        actions.setSubmitting(false);
        this.setState({
          message: 'Nothing Changed',
        });
      }
    }
  </code></pre>
  
  <p><strong>keepChanges() and discardChanges()</strong></p>
  
  <pre><code>  keepChanges () {
  
      const data = this.state.tempFormData
      makeMutation(UpdateExperimentQuery, {
        update: {
          id: this.props.match.params.id,
          data,
        },
      })
        .then(responseData =&gt; {
          console.log(responseData)
          this.setState({ isDialogOpen: false });
  
          this.props.history.push('/i/experiments');
  
        })
        .catch(err =&gt; {
  
          this.setState({
            message: 'Error Updating Experiment',
          });
          console.log(err);
        });
  
    }
  
    discardChanges () {
        this.setState({ isDialogOpen: false });
        this.componentWillMount();
    }
  </code></pre>
  
  <p>The <code>keepChanges()</code> successfully updates the data with the given field, but <code>discardChanges</code> just closes the dialog but does not reset the data to original value even though I try to call <code>componentWillMount()</code> which fetches and renders the original unchanged data in the DB.</p>
  
  <p>How can I reset the fields when I choose to discard the changes?</p>
  
  <p><strong>Edit</strong></p>
  
  <pre><code>  discardChanges () {
        this.formik.current.resetForm();
        this.setState({ isDialogOpen: false });
        this.componentWillMount();
    }
  </code></pre>
  
  <p><strong>//I get an error when I do React.createRef();</strong></p>
  
  <pre><code>class EditExperiment extends Component&lt;EditExperimentProps, EditState&gt; {
    constructor(props: EditExperimentProps) {
      super(props);
      this.formik = React.createRef();
  
      this.state = {
        experiment: null,
        message: null,
        changedFields: [],
        isDialogOpen: false,
        tempFormData: []
      };
  
      this.handleSubmit = this.handleSubmit.bind(this);
      this.clearMessage = this.clearMessage.bind(this);
      this.detectChanges = this.detectChanges.bind(this);
      this.keepChanges = this.keepChanges.bind(this);
      this.discardChanges = this.discardChanges.bind(this);
    }
  </code></pre>
  
  <p><strong>EDIT2</strong></p>
  
  <pre><code>type EditExperimentProps = {
    history: RouterHistory,
    match: Match,
    experiments: ExperimentsState,
    refetch: () =&gt; void,
  };
  type EditState = {
    experiment: ?Experiment,
    message: ?string,
  };
  
  class EditExperiment extends Component&lt;EditExperimentProps, EditState&gt; {
    constructor(props: EditExperimentProps) {
      super(props);
      this.formik = React.createRef();
  
      this.state = {
        experiment: null,
        message: null,
        changedFields: [],
        isDialogOpen: false,
        tempFormData: []
      };
  
      this.handleSubmit = this.handleSubmit.bind(this);
      this.clearMessage = this.clearMessage.bind(this);
      this.detectChanges = this.detectChanges.bind(this);
      this.keepChanges = this.keepChanges.bind(this);
      this.discardChanges = this.discardChanges.bind(this);
    }
  </code></pre>