title: How to dynamically show hide Formik form field depending on another form field
body: <p>I have a form written in Formik. I need to show/hide a 'text' field depending on the value (option) selected of the 'select' field. How can I achieve this?</p>
  <pre><code>&lt;Formik
      initialValues={{transactionCategory, name}}
      onSubmit={this.onSubmit}
      validateOnChange={false}
      validateOnBlur={false}
      validate={this.validate}
      enableReinitialize={true}
  &gt;
      {(props) =&gt; (
          &lt;Form&gt;
  
              &lt;fieldset className=&quot;form-group&quot;&gt;
                  &lt;label&gt;Category&lt;/label&gt;
                  &lt;Field name=&quot;transactionCategory&quot; component=&quot;select&quot;&gt;
                      &lt;option value=&quot;Admission&quot;&gt;Admission&lt;/option&gt;
                      &lt;option value=&quot;Class_Fee&quot;&gt;Class Fee&lt;/option&gt;
                      &lt;option value=&quot;Staff_Payment&quot;&gt;Staff Payment&lt;/option&gt;
                      &lt;option value=&quot;Other&quot;&gt;Other&lt;/option&gt;
                  &lt;/Field&gt;
              &lt;/fieldset&gt;
  
              &lt;fieldset className=&quot;form-group&quot;&gt;
                  &lt;label&gt;Name&lt;/label&gt;
                  &lt;Field className=&quot;form-control&quot; type=&quot;text&quot; name=&quot;name&quot;/&gt;
              &lt;/fieldset&gt;
  
              &lt;button className=&quot;btn btn-success&quot; type=&quot;submit&quot;&gt;Save&lt;/button&gt;
              &amp;nbsp;
              &lt;button type=&quot;reset&quot; className=&quot;btn btn-secondary&quot;&gt;Reset&lt;/button&gt;
          &lt;/Form&gt;
      )}
  &lt;/Formik&gt;
  </code></pre>
  <p>When I select the value 'Other' from the 'Category' options, the 'Name' field should be hidden.</p>