title: Redux Form Wrapped Inside Custom Portal Component?
body: <p>I keep getting this error when trying to put a redux-form inside a custom modal component I created: <code>Error: Field must be inside a component decorated with reduxForm()</code>.</p>
  
  <p>Basically, I have a view where the user sees their post.  When the go to edit the name of their post, a form pops up using the modal component to display a redux form.  When the user clicks the Save/Submit button on the modal, I want the form to validate and then callback to the parent post view component, which in turn will handle calling the action creator to update the post name.</p>
  
  <p>I think it has something to do with how I'm trying to use <code>props.children</code> to pass the form into my modal.  In trying to find a solution, I found something about <code>React.cloneElement</code>, but I'm not sure how to use that and if that even would help me resolve this issue.  Perhaps there's a completely different approach I should be taking?</p>
  
  <p><strong>Form via Modal:</strong></p>
  
  <pre><code>// ----- IMPORTS ----- //
  import React, { Component } from 'react';
  import { Field, reduxForm } from 'redux-form';
  
  import Modal from '../overlays/modal';
  import { validate } from '../../validators/post-validator';
  
  
  // ----- COMPONENT ----- //
  class MyModal extends Component {
  
      constructor( props ) {
  
          super( props );
          this.onSubmit = this.onSubmit.bind( this );
      }
  
      render() {
  
          const { handleClose, handleSubmit, show } = this.props;
  
          return (
              &lt;Modal handleClose={ handleClose } show={ show }&gt;
                  &lt;form onSubmit={ handleSubmit( this.onSubmit ) }&gt;
                      &lt;Field
                          name="name"
                          type="text"
                          component="input"
                      /&gt;
                      &lt;button type="button" onClick={ handleClose }&gt;Cancel&lt;/button&gt;
                      &lt;button type="submit"&gt;Save&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/Modal&gt;
          );
      }
  
      onSubmit( values ) {
          console.log( 'MyModal: onSubmit', values );
  
          e.preventDefault();
          this.props.handleConfirm( values );
      }
  }
  
  
  // ----- EXPORT ----- //
  export default reduxForm( {
      form: 'editNameForm',
      validate
  } )( MyModal );
  </code></pre>
  
  <p><strong>Modal:</strong></p>
  
  <pre><code>// ----- IMPORTS ----- //
  import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  
  import store from '../../stores/store';
  
  
  // ----- COMPONENT ----- //
  class Modal extends Component {
  
      constructor( props ) {
  
          super( props );
  
          this.modalContainer;
          this.modalWrapper;
  
          this.onClick = this.onClick.bind( this );
      }
  
      componentDidMount() {
  
          this.modalWrapper = document.createElement( 'div' );
          document.body.appendChild( this.modalWrapper );
          this.renderModal();
      }
  
      componentDidUpdate() {
          console.log( 'Modal: componentDidUpdate', this.props.show );
  
          this.renderModal();
      }
  
      componentWillUnmount() {
  
          document.body.removeChild( this.modalWrapper );
          this.modalWrapper = undefined;
      }
  
      render() {
          console.log( 'Modal: render', this.props.show );
  
          return &lt;noscript /&gt;;
      }
  
      renderModal() {
  
          const modalClass = ( this.props.show ) ? 'modal fade in': 'modal fade';
          const modalDisplay = ( this.props.show ) ? 'block': '';
          const modalStyle = { display: modalDisplay };
  
          ReactDOM.render(
              &lt;Provider store={ store }&gt;
                  &lt;div className={ modalClass } tabIndex="-1" ref={ elem =&gt; { this.modalContainer = elem; } } role="dialog" style={ modalStyle } onClick={ this.onClick }&gt;
                      &lt;div className="modal-dialog" role="document"&gt;
                          &lt;div className="modal-content"&gt;
                              { this.props.children }
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/Provider&gt;
          , this.modalWrapper );
      }
  
      onClick( e ) {
          console.log( 'Modal: onClick' );
  
          e.preventDefault();
  
          if ( !this.props.disabled &amp;&amp; e.target === this.modalContainer )
              this.props.handleClose( e );
      }
  }
  
  
  // ----- EXPORT ----- //
  export default Modal;
  </code></pre>