title: React Bootstrap + Formik - show errors after I click submit button
body: <p>In my app I use React Bootstrap and Formik. I want the bootstrap to show that field is invalid (for example is not an email but should be) after I press the submit button. And then when I start typing new values to fields it should disappear. In the tutorial I used I only found the way to show that field is invalid only at the same moment the user is typing the values?</p>
  
  <p>How to do that? How to set <code>isInvalid</code> to show errors only after submit using Formik?</p>
  
  <p>Here  is my current code</p>
  
  <pre><code>import * as yup from "yup";
  import React from "react";
  import Form from "react-bootstrap/Form";
  import Button from "react-bootstrap/Button";
  import {Formik} from "formik";
  import {loginActions} from "../_actions/loginActions";
  import {connect} from "react-redux";
  import {loginService} from "../_services";
  
  const schema = yup.object().shape({
      username: yup.string().email("Login musi być w formie e-mail").required("Wypełnij pole login"),
      password: yup.string().required("Wypełnij pole hasło")
  });
  
  class LoginForm extends React.Component {
  
      constructor(props) {
          super(props);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      handleSubmit(e) {
          const {username, password} = e;
          if (username &amp;&amp; password) {
              loginService
                  .login(username, password)
                  .then(
                      success =&gt; {
                          const data = success.data;
                          if (success.status === 200 &amp;&amp; data.success === true) {
                              return {...data.user, password: password};
                          } else if (success.status === 400) {
                              window.location.reload();
                          }
                          const error = (!data.success &amp;&amp; "Wrong credentials") || success.statusText;
                          return Promise.reject(error);
                      }
                  )
                  .then(auth =&gt; {
                      this.props.login(auth)
                  })
          }
      }
  
      render() {
          return (
              &lt;Formik
                  validationSchema={schema}
                  onSubmit={e =&gt; this.handleSubmit(e)}
                  initialValues={{username: '', password: ''}}&gt;
                  {
                      formProps =&gt; (
                          &lt;Form name='form' onSubmit={formProps.handleSubmit}&gt;
                              &lt;Form.Group noValidate controlId="loginForm.username"&gt;
                                  &lt;Form.Label&gt;Adres e-mail&lt;/Form.Label&gt;
                                  &lt;Form.Control
                                      type="text"
                                      name="username"
                                      value={formProps.values.username}
                                      onChange={formProps.handleChange}
                                      isInvalid={!!formProps.errors.username}
                                  /&gt;
                                  &lt;Form.Control.Feedback type="invalid"&gt;
                                      {formProps.errors.username}
                                  &lt;/Form.Control.Feedback&gt;
                              &lt;/Form.Group&gt;
                              &lt;Form.Group controlId="loginForm.password"&gt;
                                  &lt;Form.Label&gt;Hasło&lt;/Form.Label&gt;
                                  &lt;Form.Control
                                      type="password"
                                      name="password"
                                      value={formProps.values.password}
                                      onChange={formProps.handleChange}
                                  &gt;
                                  &lt;/Form.Control&gt;
                                  &lt;Form.Control.Feedback type="invalid"&gt;
                                      {formProps.errors.password}
                                  &lt;/Form.Control.Feedback&gt;
                              &lt;/Form.Group&gt;
                              &lt;Form.Group controlId="loginForm.loginBtn"&gt;
                                  &lt;Button variant="primary" type="submit"&gt;
                                      Zaloguj się
                                  &lt;/Button&gt;
                                  {formProps.isSubmitting &amp;&amp;
                                  (
                                      &lt;img
                                          src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
                                      /&gt;)
                                  }
                              &lt;/Form.Group&gt;
                          &lt;/Form&gt;
                      )
                  }
              &lt;/Formik&gt;
          )
      }
  }
  
  
  function mapState(state) {
      const {session} = state;
      return {session}
  }
  
  const connectedLoginForm = connect(mapState, {login: loginActions.login})(LoginForm);
  export {connectedLoginForm as LoginForm};
  </code></pre>