title: Set initialVariables in Formik from state if it is in edit mode
body: <p>I'm using Formik for validating some data. It works fine when it should create new entity, but there are problems when I want to edit an entity.</p>
  <p>The edit mode must be activated from the state (this.state.edit === true), also the data of the entity is stored on the state, for example this.state.name has a string value there.</p>
  <p>I put a console log in render, the problem is that the log is printed several times, the first time with empty string on this.sate.name and the value of this.state.edit is false. The next prints it is correct, this edit on true and name containing a value.</p>
  <p>Here is the code:</p>
  <pre><code>import React from 'react';
  import { Redirect } from 'react-router-dom';
  import { Formik, Form, Field } from 'formik';
  import { Input, Button, Label, Grid } from 'semantic-ui-react';
  import { connect } from 'react-redux';
  import * as Yup from 'yup';
  import { Creators } from '../../../actions';
  
  class CreateCompanyForm extends React.PureComponent {
    constructor(props) {
      super(props);
  
      this.state = {
        name: '',
        redirectCreate: false,
        redirectEdit: false,
        edit: false,
      };
    }
  
    componentDidMount() {
      const {
        getCompany,
        getCompanies,
        location: { pathname },
      } = this.props;
      getCompanies({
        name: '',
      });
  
      if (pathname.substring(11) !== 'create') {
        getCompany(pathname.substring(16));
        this.setState({
          edit: true,
        });
  
        this.setState({
          name: this.props.company.name,
        });
      }
    }
  
  
  
    handleSubmitCreate = e =&gt; {
      e.preventDefault();
      const { createCompany, getCompanies } = this.props;
      createCompany(this.state);
      this.setState({ redirectCreate: true });
      getCompanies(this.props.query);
    };
  
    handleSubmit = values =&gt; {
      const { createCompany, getCompanies } = this.props;
      createCompany(values);
      this.setState({ redirectCreate: true });
      getCompanies(this.props.query);
    };
  
    handleSubmitEdit = e =&gt; {
      e.preventDefault();
      const { name } = this.state;
      const { updateCompany } = this.props;
      updateCompany(this.props.company._id, {
        name,
      });
      this.setState({ redirectEdit: true });
    };
  
    render() {
      let title = 'Create company';
      let buttonName = 'Create';
      let submit = this.handleSubmitCreate;
  
      const { redirectCreate, redirectEdit } = this.state;
  
      if (redirectCreate) {
        return &lt;Redirect to=&quot;/companies&quot; /&gt;;
      }
  
      if (redirectEdit) {
        return &lt;Redirect to={`/companies/${this.props.company._id}`} /&gt;;
      }
  
      if (this.state.edit) {
        title = 'Edit company';
        buttonName = 'Edit';
        submit = this.handleSubmitEdit;
      }
      console.log('state: ', this.state); // first time it is empty, next times it has data
      let initialValues = {};
      if (this.state.edit) {
        initialValues = {
          name: this.state.name,
        };
      } else {
        initialValues = {
          name: '',
        };
      }
  
      const validationSchema = Yup.object({
        name: Yup.string().required('This field is required'),
      });
  
      return (
        &lt;&gt;
          &lt;Button type=&quot;submit&quot; form=&quot;amazing&quot;&gt;
            create company
          &lt;/Button&gt;
  
          &lt;Formik
            htmlFor=&quot;amazing&quot;
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values =&gt; this.handleSubmit(values)}&gt;
            {({ values, errors, touched, setValues, setFieldValue }) =&gt; (
              &lt;Form id=&quot;amazing&quot;&gt;
                &lt;Grid&gt;
                  &lt;Grid.Column&gt;
                    &lt;Label&gt;Company name&lt;/Label&gt;
                    &lt;Field name=&quot;name&quot; as={Input} placeholder=&quot;write a name&quot; /&gt;
                    &lt;div&gt;{touched.name &amp;&amp; errors.name ? errors.name : null}&lt;/div&gt;
                  &lt;/Grid.Column&gt;
                &lt;/Grid&gt;
  
                &lt;Button type=&quot;submit&quot; floated=&quot;right&quot; form=&quot;amazing&quot;&gt;
                  {buttonName} company
                &lt;/Button&gt;
              &lt;/Form&gt;
            )}
          &lt;/Formik&gt;
        &lt;/&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; ({
    companies: state.companies.companies,
    company: state.companies.selectedCompany,
    query: state.companies.query,
  });
  
  const mapDispatchToProps = {
    getCompanies: Creators.getCompaniesRequest,
    createCompany: Creators.createCompanyRequest,
    getCompany: Creators.getCompanyRequest,
    updateCompany: Creators.updateCompanyRequest,
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(CreateCompanyForm);
  </code></pre>
  <p>I put the whole file here to have more context. Is it a way to set the initialValue of <code>name</code> with the value from this.state.name and put it inside the input field?</p>