title: ReduxForm inside Modal
body: <p>I use ReactJS and want to add reduxForm to modal.
  For modal I use <a href="https://reactstrap.github.io/" rel="nofollow">reactstrap</a> library that represents bootstrap 4 for React.
  For form validation I use <a href="https://redux-form.com/6.0.5/" rel="nofollow">reduxForm</a> </p>
  
  <p>I have tasked add form  modal with validation fields and I did that:</p>
  
  <pre><code>  render() {
      const {handleSubmit, fields: {
              email
          }} = this.props;
  
      const FormEmail = ({touched, error}) =&gt; {
          if (touched &amp;&amp; error)
              return (
                  &lt;div&gt;
                      &lt;Input type="email" name="email" id="email"/&gt;
                      &lt;div className="error"&gt;{error}&lt;/div&gt;
                  &lt;/div&gt;
              );
          return (&lt;Input type="email" name="email" id="email"/&gt;);
      }
      return (
          &lt;div&gt;
              &lt;Col&gt;
                  &lt;Col xs={{
                      size: 9
                  }}&gt;
                      &lt;ReportSettings/&gt;
                  &lt;/Col&gt;
                  &lt;Col xs={{
                      size: 3
                  }}&gt;
                      &lt;Button outline color="primary" onClick={this.toggle}&gt;Share&lt;/Button&gt;
                  &lt;/Col&gt;
              &lt;/Col&gt;
              &lt;Form onSubmit={handleSubmit(this.toggle)}&gt;
                  &lt;Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}&gt;
                      &lt;ModalHeader toggle={this.toggle}&gt;Share&lt;/ModalHeader&gt;
                      &lt;ModalBody&gt;
                          &lt;FormGroup row&gt;
                              &lt;CheckBoxInputField data={this.state.measurements} handleFieldChange={this.handleFieldChange}/&gt;
                          &lt;/FormGroup&gt;
                          &lt;FormGroup row&gt;
                              &lt;Label for="email" xs={2}&gt;Email&lt;/Label&gt;
                              &lt;Col xs={10}&gt;
                                  &lt;FormEmail {...email}/&gt;
                              &lt;/Col&gt;
                          &lt;/FormGroup&gt;
                          &lt;FormGroup row&gt;
                              &lt;Label for="message" xs={2}&gt;Message&lt;/Label&gt;
                              &lt;Col xs={10}&gt;
                                  &lt;Input type="textarea" name="message" id="message"/&gt;
                              &lt;/Col&gt;
                          &lt;/FormGroup&gt;
  
                      &lt;/ModalBody&gt;
                      &lt;ModalFooter&gt;
                          &lt;Button action="submit" color="primary" value={true}&gt;OK&lt;/Button&gt;
                          &lt;Button color="secondary" onClick={this.toggle} value={false}&gt;Cancel&lt;/Button&gt;
                      &lt;/ModalFooter&gt;
                  &lt;/Modal&gt;
              &lt;/Form&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>my toggle function:</p>
  
  <pre><code>toggle(e) {
          e.preventDefault();
          this.setState({
              modal: !this.state.modal
          });
          if (e.target.value === 'true') {
              const measurementsID = this.state.measurements.values.filter((measurement) =&gt; {
                  return measurement.checked;
              }).map((measurement) =&gt; {
                  return measurement.value;
              });
  
              this.props.onShare(MeasurementsToBitMap(measurementsID));
          }
      }
  </code></pre>
  
  <p>validation function:</p>
  
  <pre><code>function validate(formProps) {
      const errors = {};
  
      if (!formProps.email) {
          errors.email = 'Please enter an email';
      }
      return errors;
  }
  </code></pre>
  
  <p>finally I export Component:</p>
  
  <pre><code>export default reduxForm({form: 'form', fields: ['email'], validate})(HeadMeasurement);
  </code></pre>
  
  <p>When I click on <strong>cancel button</strong> the modal close it works good, but when I click on <strong>OK button</strong> 
  and fields aren't valid error messages aren't showed otherwise when fields are valid modal isn't disappeared.</p>
  
  <p>My question is how to combine reduxForm and Modal work together?</p>
  
  <p>Thanks, Michael.</p>