title: How can I show or hide Fields in redux-form based on some condition triggered by an event
body: <p>I have the following form, which contains a Field and a FieldArray. Inside the FieldArray I have a select field, with two options: Demo and Final. When Demo is selected, I would like to hide the Maintenance Period and Maintenance Type Fields and when Final is selected, the Demo Duration field should be shown, the previous 2 should be hidden. The code is below:</p>
  
  <pre><code>const renderLicenses = ({ fields }) =&gt; (
      &lt;ul className="list-unstyled"&gt;
          &lt;li&gt;
              &lt;button type="button" className="btn btn-info" onClick={() =&gt; fields.push({})}&gt;Add License&lt;/button&gt;
          &lt;/li&gt;
          {fields.map((license, index) =&gt;
              &lt;li key={index}&gt;
                  &lt;button
                      type="button"
                      title="Remove license"
                      onClick={() =&gt; fields.remove(index)}/&gt;
                  &lt;h4&gt;License #{index + 1}&lt;/h4&gt;
                  &lt;Field
                      name={`${license}.licenseName`}
                      type="text"
                      component={renderSelectLicenses}
                      collectionOfOptions={LICENSES}
                      label="Please select license name"&gt;
                  &lt;/Field&gt;
                  &lt;Field
                      name={`${license}.licenseType`}
                      type="text"
                      component={renderSelectLicenseType}
                      label="Please select license type"/&gt;
                  &lt;Field
                      name={`${license}.validFrom`}
                      type="text"
                      component={renderCalendar}
                      label="Valid from"/&gt;
                  &lt;Field
                      name={`${license}.validTo`}
                      type="text"
                      component={renderCalendar}
                      label="Valid to"/&gt;
                  &lt;Field
                      name={`${license}.demoDuration`}
                      type="text"
                      component={renderField}
                      label="Demo duration"/&gt;
                  &lt;Field
                      name={`${license}.maintenancePeriod`}
                      type="text"
                      component={renderField}
                      label="Maintenance period"/&gt;
                  &lt;Field
                      name={`${license}.maintenanceType`}
                      type="text"
                      component={renderSelectMaintenanceTypes}
                      collectionOfOptions={MAINTENANCE_OPTIONS}
                      label="Maintenance type"/&gt;
              &lt;/li&gt;
          )}
      &lt;/ul&gt;
  );
  </code></pre>
  
  <p>This is the renderSelectLicenseType code:</p>
  
  <pre><code>    import React from 'react';
      const renderSelectLicenseType = ({input, label}) =&gt; (
      &lt;div className="form-group"&gt;
          &lt;label&gt;{label}&lt;/label&gt;
          &lt;select className="form-control" {...input}&gt;
              &lt;option disabled&gt;Please select a license type&lt;/option&gt;
              &lt;option value="demo"&gt;Demo&lt;/option&gt;
              &lt;option value="final"&gt;Final&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      );
  
  export default renderSelectLicenseType;
  </code></pre>
  
  <p>Basically, I would like to have an onChange event on select and hide/show the other fields if the event.target.value is 'demo' or 'final'. I do not know how to propagate this event to the other fields that are self contained:</p>
  
  <pre><code>const renderField = ({ input, label, type, meta: { touched, error } }) =&gt; (
  &lt;div className="form-group"&gt;
      &lt;label&gt;{label}&lt;/label&gt;
      &lt;div&gt;
          &lt;input className="form-control" {...input} type={type} placeholder=  {label}/&gt;
          {touched &amp;&amp; error &amp;&amp; &lt;span&gt;{error}&lt;/span&gt;}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>);</p>
  
  <p>Finally, this is the code for the master component that holds the entire form:</p>
  
  <pre><code>render() {
          const {handleSubmit, invalid, submitting} = this.props;
          return (
              &lt;form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} style={tempStyles}&gt;
                  &lt;Field name="machineID" type="text" component={renderField} label="Machine ID"/&gt;
                  &lt;FieldArray name="licenses" component={renderLicenses} /&gt;
                  &lt;div className="form-group"&gt;
                      &lt;RaisedButton type="submit" label="Add new machine" primary={true} disabled={invalid || submitting}/&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          )
      }
  
  export default reduxForm({
      form: 'addMachine',
      validate: validate
  })(AddMachineMaster);
  </code></pre>
  
  <p>I am new to redux-form and having a difficult time trying to figure this out. Thank you!</p>