title: Conditionally render Formik field with validation based on input values of another field in React
body: <p>I have a form written using React and Formik. The form currently has 3 fields (for arguments sake, let's assume 3 strings which are validated as required fields using Yup).</p>
  <p>If one of the fields holds a particular value I would like to remove a different field, along with the associated validation. ie if field x holds the value 'somestring', I would like field y to appear and be required, but if field x holds a value other than 'somestring', I would like field y to not appear, and consequently not be required.</p>
  <p>I am reasonably new to React and Formik validation and so am not sure how to evaluate the current value of a field and alter the rendering based on this.</p>
  <p>I am trying to accomplish this using Reacts function components rather than class components.</p>
  <pre><code>// react imports
  import React, {useContext} from &quot;react&quot;;
  // style imports
  import './NewUser.css'
  
  // hook &amp; context imports
  import {useHttpClient} from &quot;../../../Shared/hooks/http-hook&quot;;
  import AuthContext from &quot;../../../Shared/context/auth-context&quot;;
  
  // form validation imports
  import * as Yup from 'yup';
  import {Field, Form, Formik} from 'formik';
  
  
  const NewUser = () =&gt; {
      const auth = useContext(AuthContext)
      const {sendRequest} = useHttpClient()
  
      const SignupSchema = Yup.object().shape({
          name: Yup.string().required(),
          conditionalTrigger: Yup.string().required(), // if this field holds 'somestring' then conditionalAffected should render
          conditionalAffected: Yup.string().required()
      });
  
      return (
                      &lt;Formik
                          initialValues={{
                              name: '',
                              conditionalTrigger: '',
                              conditionalAffected: ''
                          }}
                          validationSchema={SignupSchema}
  
                          onSubmit={async values =&gt; {
                              const response = await sendRequest(
                                  `${process.env.REACT_APP_BACKEND_URL}/users/create`,
                                  'POST',
                                  JSON.stringify(values),
                                  {
                                      'Content-Type': 'application/json',
                                      Authorization: 'Bearer ' + auth.token
                                  }
                              )
                          }}
                      &gt;
                          {({errors, touched}) =&gt; (
  
                              &lt;Form&gt;
                                  &lt;Field name=&quot;name&quot; placeholder={&quot;Name&quot;}/&gt;
                                  {errors.name &amp;&amp; touched.name ? (
                                      &lt;div&gt;{errors.name}&lt;/div&gt;
                                  ) : null}
                              &lt;Field name=&quot;conditionalTrigger&quot; placeholder={&quot;conditionalTrigger&quot;}/&gt;
                                  {errors.conditionalTrigger &amp;&amp; touched.conditionalTrigger ? (
                                      &lt;div&gt;{errors.conditionalTrigger}&lt;/div&gt;
                                  ) : null}
                              &lt;Field name=&quot;conditionalAffected&quot; placeholder={&quot;conditionalAffected&quot;}/&gt;
                                  {errors.conditionalAffected &amp;&amp; touched.conditionalAffected ? (
                                      &lt;div&gt;{errors.conditionalAffected}&lt;/div&gt;
                                  ) : null}
  
  
                                  &lt;button className={'btn red'} type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
                              &lt;/Form&gt;
                          )}
                      &lt;/Formik&gt;
      )
  }
  
  export default NewUser
  </code></pre>