title: Edit an entry with Formik and Yup doesn't recognize the existing fields
body: <p>I'm using <a href="https://www.npmjs.com/package/formik" rel="nofollow noreferrer">Formik</a> and <a href="https://www.npmjs.com/package/yup" rel="nofollow noreferrer">Yup</a> when I create an entity (company in this case) in order to check if the fields are correct and all of them are introduced (all are required).</p>
  <p>When I create an entity it works fine: it only lets you create it if all fields are introduced and the rules are fulfilled (only one rule at the moment for the email).</p>
  <p>This is the code which works to create a new company with 2 fields name and email:</p>
  <pre class="lang-js prettyprint-override"><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';
      import Layout from '../../Layout/Layout';
      
      class CreateCompanyForm extends React.PureComponent {
        constructor(props) {
          super(props);
      
          this.state = {
            name: '',
            contactMail: '',
            redirectCreate: false,
            redirectEdit: false,
            edit: false,
          };
        }
      
        componentDidMount() {
          const {
            getCompany,
            location: { pathname },
          } = this.props;
        }
      
        handleSubmit = values =&gt; {
          const { createCompany, getCompanies } = this.props;
          createCompany(values);
          this.setState({ redirectCreate: true });
          getCompanies(this.props.query);
        };
      
        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;;
          }
          const initialValues = {
            name: '',
            contactMail: '',
          };
          const requiredErrorMessage = 'This field is required';
          const emailErrorMessage = 'Please enter a valid email address';
          const validationSchema = Yup.object({
            name: Yup.string().required(requiredErrorMessage),
            contactMail: Yup.string()
              .email(emailErrorMessage)
              .required(requiredErrorMessage),
          });
          return (
            &lt;Layout&gt;
              &lt;div&gt;
                &lt;Button type=&quot;submit&quot; form=&quot;amazing&quot;&gt;
                  Create company
                &lt;/Button&gt;
                &lt;Button onClick={() =&gt; this.props.history.goBack()}&gt;Discard&lt;/Button&gt;
                &lt;div&gt;Create company&lt;/div&gt;
              &lt;/div&gt;
      
              &lt;Formik
                htmlFor=&quot;amazing&quot;
                initialValues={initialValues}
                validationSchema={validationSchema}
                onSubmit={values =&gt; this.handleSubmit(values)}&gt;
                {({ values, errors, touched, setValues }) =&gt; (
                  &lt;Form id=&quot;amazing&quot;&gt;
                    &lt;Grid columns={2}&gt;
                      &lt;Grid.Column&gt;
                        &lt;Label&gt;Company Name&lt;/Label&gt;
                        &lt;Field name=&quot;name&quot; as={Input} placeholder=&quot;Hello&quot; /&gt;
                        &lt;div&gt;{touched.name &amp;&amp; errors.name ? errors.name : null}&lt;/div&gt;
                      &lt;/Grid.Column&gt;
      
                      &lt;Grid.Column&gt;
                        &lt;Label&gt;Contact Mail&lt;/Label&gt;
                        &lt;Field
                          name=&quot;contactMail&quot;
                          as={Input}
                          placeholder=&quot;johnappleseed@hello.com&quot;
                        /&gt;
                        &lt;div&gt;
                          {touched.contactMail &amp;&amp; errors.contactMail
                            ? errors.contactMail
                            : null}
                        &lt;/div&gt;
                      &lt;/Grid.Column&gt;
                    &lt;/Grid&gt;
                  &lt;/Form&gt;
                )}
              &lt;/Formik&gt;
            &lt;/Layout&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>The problem appears when I want to edit the company. So when someone click on a company on edit button it should open the company with all its fields containing the current values which should be editable.</p>
  <p>To get those current values I'm using the state, for example the email can be accessed from <code>this.state.email</code> and in order to change the value it was added <code>onChange</code> method.</p>
  <p>The values can be modified in the text input. However, it triggers the Yup message that says the field is required even if there is data in it - why is this happening? The field is not empty, that's the situation when it must show that message.</p>
  <p>And of course, it doesn't update the entity when I click to save it because it requires those fields.</p>
  <p>Here is the code:</p>
  <pre><code>import React from 'react';
  ...
  
  class CreateCompanyForm extends React.PureComponent {
    constructor(props) {
      super(props);
  
      this.state = {
        name: '',
        contactMail: '',
        redirectCreate: false,
        redirectEdit: false,
        edit: false,
      };
    }
  
    componentDidMount() {
      const {
        getCompany,
        location: { pathname },
      } = this.props;
      if (pathname.substring(11) !== 'create') { // checks the URL if it is in edit mode 
        getCompany(pathname.substring(16));
        this.setState({
          edit: true,
        });
        this.setState({
          name: this.props.company.name,
          contactMail: this.props.company.contactMail,
        });
      }
    }
  
      onChange = (e, { name, value }) =&gt; { // method to update the state with modified value in input
        this.setState({ [name]: value });
      };
  
    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, contactMail } = this.state;
        const { updateCompany } = this.props;
        updateCompany(this.props.company._id, {
          name,
          contactMail,
        });
        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;
      }
  
      const initialValues = {
        name: '',
        contactMail: '',
      };
      const requiredErrorMessage = 'This field is required';
      const emailErrorMessage = 'Please enter a valid email address';
      const validationSchema = Yup.object({
        name: Yup.string().required(requiredErrorMessage),
        contactMail: Yup.string()
          .email(emailErrorMessage)
          .required(requiredErrorMessage),
      });
      return (
        &lt;Layout&gt;
          &lt;div&gt;
            &lt;Button type=&quot;submit&quot; form=&quot;amazing&quot;&gt;
              Create company
            &lt;/Button&gt;
            &lt;Button onClick={() =&gt; this.props.history.goBack()}&gt;Discard&lt;/Button&gt;
            &lt;div&gt;Create company&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;Formik
            htmlFor=&quot;amazing&quot;
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values =&gt; this.handleSubmit(values)}&gt;
            {({ values, errors, touched, setValues }) =&gt; (
              &lt;Form id=&quot;amazing&quot;&gt;
                &lt;Grid columns={2}&gt;
                  &lt;Grid.Column&gt;
                    &lt;Label&gt;Company Name&lt;/Label&gt;
                    &lt;Field
                      name=&quot;name&quot;
                      as={Input}
                      placeholder=&quot;Hello&quot;
                      value={this.state.name || ''} // takes the value from the state
                      onChange={this.onChange} // does the changing 
                    /&gt;
                    &lt;div&gt;{touched.name &amp;&amp; errors.name ? errors.name : null}&lt;/div&gt;
                  &lt;/Grid.Column&gt;
  
                  &lt;Grid.Column&gt;
                    &lt;Label&gt;Contact Mail&lt;/Label&gt;
                    &lt;Field
                      name=&quot;contactMail&quot;
                      as={Input}
                      placeholder=&quot;johnappleseed@hello.com&quot;
                      value={this.state.contactMail || ''} // takes the value from the state
                      onChange={this.contactMail} // does the changing 
                    /&gt;
                    &lt;div&gt;
                      {touched.contactMail &amp;&amp; errors.contactMail
                        ? errors.contactMail
                        : null}
                    &lt;/div&gt;
                  &lt;/Grid.Column&gt;
                &lt;/Grid&gt;
              &lt;/Form&gt;
            )}
          &lt;/Formik&gt;
        &lt;/Layout&gt;
      );
    }
  }
  
  ...
  
  export default connect(mapStateToProps, mapDispatchToProps)(CreateCompanyForm);
  </code></pre>
  <p>Any ideas about how to solve this and make the fields editable and remove the <code>'This field is required'</code> message when the field already has data?</p>