title: How to use reduxForm() and connect() together for class component in react?
body: <p>added reducer in reducer file </p>
  
  <pre><code>const reducers = {
    // ... other reducers here ...
    form: formReducer
  };
  </code></pre>
  
  <p>I am using <a href="https://redux-form.com/7.1.2/docs/gettingstarted.md/" rel="nofollow noreferrer"><code>redux-form</code></a> v 7.1.2 with react v 16 and using <code>reduxForm()`` but there is already</code>connect()` applied in this class, tried 2 approached to add both HOC in the same page but failed on both.</p>
  
  <p>below is the relevant code of my files , please check and let me know what  is missing ?</p>
  
  <ol>
  <li>Using named export</li>
  </ol>
  
  <h3>renderField.jsx</h3>
  
  <pre><code>    import React from 'react';
  
      const renderField = ({ input, label, type, meta: { touched, error } }) =&gt; (
        &lt;div&gt;
          &lt;label&gt;{label}&lt;/label&gt;
          &lt;div&gt;
            &lt;input {...input} placeholder={label} type={type} /&gt;
            {touched &amp;&amp; error &amp;&amp; &lt;span&gt;{error}&lt;/span&gt;}
          &lt;/div&gt;
        &lt;/div&gt;
      );
  
      export default renderField;
  </code></pre>
  
  <h3>Register.jsx</h3>
  
  <pre><code>import { connect } from 'react-redux';
  import { Field, reduxForm } from 'redux-form';
  import { renderField } from './renderField';
  
  class RegisterPage extends React.Component {
      constructor (props) {
          super(props);
          this.state = {
              user: {
                  firstName: ''
              },
              submitted: false
          };
  
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
  
      handleSubmit (values) {
          this.setState({ submitted: true });
          const { user } = this.state;
          const { dispatch } = this.props;
          dispatch(userActions.register(user));
      }
  
      render () {
          const { registering } = this.props;
          return (
              &lt;div className="col-md-6 col-md-offset-3"&gt;
                  &lt;h2&gt;Register&lt;/h2&gt;
                  &lt;form onSubmit={this.handleSubmit} &gt;
                      &lt;div className="form-group"&gt;
                          &lt;Field
                              name="firstName"
                              type="text"
                              label="First Name"
                              className="form-control"
                              component={renderField}
                          /&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;button type="submit" className="btn btn-primary" disabled={this.pristine} &gt;Register&lt;/button&gt;
                          { registering &amp;&amp; &lt;Loading /&gt; }
                          &lt;Link to="/login" className="btn btn-link"&gt;Cancel&lt;/Link&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>below class definition , here is connect and reduxForm usage</p>
  
  <pre><code>RegisterPage = reduxForm({
      form: 'register',
      destroyOnUnmount: false
  })(RegisterPage);
  
  const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);
  
  export { connectedRegisterPage as RegisterPage };
  </code></pre>
  
  <h3>App.jsx</h3>
  
  <pre><code>import { RegisterPage } from '../RegisterPage';
  
  &lt;Route path="/register" component={RegisterPage} /&gt;
  </code></pre>
  
  <p>BUT this gives multiple warning in console</p>
  
  <blockquote>
    <p>Failed prop type: The prop <code>component</code> is marked as required in
    <code>Field</code>, but its value is <code>undefined</code>. in Field (created by
    RegisterPage)</p>
    
    <p>Warning: React.createElement: type is invalid -- expected a string
    (for built-in components) or a class/function (for composite
    components) but got: undefined. You likely forgot to export your
    component from the file it's defined in. Check the render method of
    <code>ConnectedField</code>.</p>
  </blockquote>
  
  <hr>
  
  <ol start="2">
  <li>with default export </li>
  </ol>
  
  <h3>Register.jsx</h3>
  
  <pre><code>RegisterPage = reduxForm({
      form: 'register'
  })(RegisterPage);
  
  const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);
  
  export { connectedRegisterPage as default };
  </code></pre>
  
  <h3>App.jsx</h3>
  
  <pre><code>import RegisterPage from '../RegisterPage';
  console.log("RegisterPage", RegisterPage); // undefined 
  </code></pre>
  
  <p>this gives no warning but display blank page in the browser</p>