title: Provide formik form value to context provider
body: <p>I have a <code>&lt;Login&gt;</code> component/form that uses <code>&lt;Formik&gt;</code> to keep track of my forms state. There's a specific value <code>props.values.userType</code> that I want to pass to a context provider so I can pass this prop down to my routing component. </p>
  
  <p>My goal is to redirect users that aren't logged in as admin and if they are indeed an admin proceed to render the route as normal.</p>
  
  <p>So I created an <code>AuthContext</code>.</p>
  
  <p><code>const AuthContext = React.createContext();</code></p>
  
  <p>In my <code>&lt;Login&gt;</code> component I have the <code>&lt;Formik&gt;</code> component below. Where should I use <code>AuthContext.Provider</code> and how should I pass <code>values.props.userType</code> to that provider? Should <code>props.values.userType</code> be initialized in state of the class component this <code>&lt;Formik&gt;</code> component lives in ?</p>
  
  <p>Or should I create an object store in state that keeps track of the <code>userType</code>? Something like this</p>
  
  <pre><code>export const AuthContext = createContext({
    user: null,
    isAuthenticated: null
  });
  </code></pre>
  
  <p>I have a <a href="https://codesandbox.io/s/logincomponent-fy12t" rel="nofollow noreferrer">codesandbox here</a>.</p>
  
  <pre><code>class FormikLoginForm extends Component {
    constructor(props) {
    super(props);
  
  this.state = {};
  }
  
  render() {
  const {} = this.state;
  
  return (
  
  &lt;Formik
        initialValues={{
          username: "",
          password: "",
          userType: "",
        }}
        onSubmit={(values, { setSubmitting }) =&gt; {
          setTimeout(() =&gt; {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
          }, 500);
        }}
        validationSchema={Yup.object().shape({
          userType: Yup.string().required("User type is required"),
          username: Yup.string().required(
            "Required -- select a user type role"
          ),
          password: Yup.string().required("Password is required"),
        })}
      &gt;
        {props =&gt; {
          const {
            values,
            touched,
            errors,
            dirty,
            isSubmitting,
            handleChange,
            handleBlur,
            handleSubmit,
            handleReset
          } = props;
          return (
            &lt;&gt;
              &lt;Grid&gt;
                &lt;Grid.Column&gt;
                  &lt;Header as="h2" color="teal" textAlign="center"&gt;
                    Log-in to your account
                  &lt;/Header&gt;
                  &lt;Form size="large" onSubmit={handleSubmit}&gt;
                    &lt;Segment stacked&gt;
                      &lt;RadioButtonGroup
                        id="userType"
                        label="User Type"
                        value={values.userType}
                        error={errors.userType}
                        touched={touched.userType}
                      &gt;
  </code></pre>
  
  <p>Then in my <code>index.js</code> file, where I render all my routes, I have my <code>AdminRoute</code> that uses the logic I described above</p>
  
  <pre><code>const AdminRoute = props =&gt; {
    const { userType, ...routeProps } = props;
    if (userType !== "admin") return &lt;Redirect to="/login" /&gt;;
    return &lt;Route {...routeProps} /&gt;;
  };
  
  const Routes = () =&gt; (
    &lt;Router&gt;
      &lt;Switch&gt;
        &lt;Route exact path="/" component={Home} /&gt;
        &lt;Route path="/login" component={FormikLoginForm} /&gt;
        &lt;Route exact path="/admin" component={AdminPage} /&gt;
        /&gt;
        &lt;Route path="/admin/change-password" component={ChangePassword} /&gt;
      &lt;/Switch&gt;
    &lt;/Router&gt;
  );
  </code></pre>