title: React Redux Redux form List main form application
body: <p>I use - React Redux and Redux form</p>
  
  <p>I have a user list form which has table of contents with 
  edit/delete buttons on the right side of each row. When I click 
  on edit button it should pass the current row values to the user main form.
  At the bottom of the form I have a addnew button which redirects to user main form.</p>
  
  <p>My requirement is when I click addnew it should open user main form with empty fields,
  when I click edit button on the table row it should open user main form with pre-populated fields with the
  current selected row values.</p>
  
  <p>How can I achieve this. Please help. Thanks in advance.</p>
  
  <p>For Ex:</p>
  
  <h1>My UserList.js form</h1>
  
  <p>renderUsers() {</p>
  
  <p>return this.props.users.reverse().map(user => {</p>
  
  <pre><code>return (
  
      &lt;tbody key={user._id}&gt;
  
       &lt;tr key={user._id}&gt;
  
        &lt;td&gt;{user.email}&lt;/td&gt;
  
         &lt;td&gt;{user.firstname}&lt;/td&gt;
  
      &lt;td&gt;&lt;Link id={user._id} to="#" onClick={() =&gt; this.onDeleteUser(user._id)}&gt;
  &lt;i className="material-icons"&gt;delete&lt;/i&gt;&lt;/Link&gt;
  
      &amp;nbsp;&lt;Link id={user._id} to="user/new" 
  onClick={ () =&gt; here I have to call usermain form sending the current row values}&gt;
  &lt;i className="material-icons"&gt;edit&lt;/i&gt;&lt;/Link&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
  
     &lt;/tbody&gt;
  
  );
  </code></pre>
  
  <p>});</p>
  
  <p>}</p>
  
  <p>render() {</p>
  
  <p>return (</p>
  
  <pre><code>&lt;div&gt;
  
   &lt;div&gt;&lt;h4&gt;User List&lt;/h4&gt;&lt;/div&gt;&lt;hr /&gt;
  
      &lt;table className="bordered highlight responsive"&gt;
  
       &lt;thead&gt;
  
      &lt;tr&gt;
  
      &lt;td&gt;Email&lt;/td&gt;
  
          &lt;td&gt;First Name&lt;/td&gt;
  </code></pre>
  
  <p>Action</p>
  
  <p></p>
  
  <p></p>
  
  <p></p>
  
  <pre><code>        {this.renderUsers()}
  
     &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>);</p>
  
  <p>}
  }</p>
  
  <p>function mapStateToProps({ users}) {</p>
  
  <p>return { users };
  }</p>
  
  <p>export default connect(mapStateToProps, { fetchUsers })(UserList);</p>
  
  <h1>My User.js form</h1>
  
  <p>const User = () => {
    return(
      </p>
  
  <pre><code>  &lt;UserList /&gt;
  
      &lt;div className="fixed-action-btn"&gt;
        &lt;Link to="user/new" className="btn-floating btn-large waves-effect waves-light red"&gt;
          &lt;i className="material-icons"&gt;add&lt;/i&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>);
  };</p>
  
  <p>export default User;</p>
  
  <h1>My UserMain.js form</h1>
  
  <p>class UserMainForm extends Component {</p>
  
  <p>renderFields() {</p>
  
  <p>return _.map(userFields, ({ label, name }) => {</p>
  
  <pre><code>return (
  
    &lt;Field
  
     key={name}
  
     component={UserField}
  
     label={label}
  
     name={name}
  
    /&gt;
  
  );
  </code></pre>
  
  <p>});</p>
  
  <p>}</p>
  
  <p>render() {</p>
  
  <p>return (</p>
  
  <pre><code>&lt;div className="container" style={{marginBottom:'5px'}}&gt;
  
      &lt;div&gt;&lt;h4&gt;User Main { mode Edit/New}&lt;/h4&gt;&lt;/div&gt;&lt;hr /&gt;
  
      &lt;form className="container" onSubmit={this.props.handleSubmit(() =&gt; 
  this.props.submitUser(this.props.usermainForm.values,this.props.history))}&gt;
  
      &lt;div className="row"&gt;
  
     {this.renderFields()}
  
     &lt;/div&gt;
  
      &lt;Link to="/register/user" className="red btn-flat white-text"&gt;
  
        Cancel
        &lt;/Link&gt;
  
      &lt;button type="submit" className="waves-effect waves-teal teal btn-flat right white-text"&gt;
  
          Save
          &lt;i className="material-icons right"&gt;done&lt;/i&gt;
  
     &lt;/button&gt;
  
  &lt;/form&gt;
  
  &lt;/div&gt;
  
  );
  </code></pre>
  
  <p>}
  }</p>
  
  <p>export default reduxForm({</p>
  
  <p>validate,</p>
  
  <p>form: 'usermainForm',</p>
  
  <p>destroyOnUnmount: false
   })(UserMainForm);</p>