title: Reactjs Redux Forms Update Issue?
body: <p>Being an Angular developer trying hands-on ReactJS.Currently facing issue with form update/edit. I am unable to get the latest value in the form when clicking on the edit button. I am using Functional Component and use effect as React Hook.</p>
  <pre><code>import { Button, Form, Modal, Input, Grid } from 'semantic-ui-react'
  import { SuccessImg} from '../../assets/images';
  import { Field, reduxForm ,getFormValues} from 'redux-form';
  import store from 'store2';
  import addPaymentMethodCard from './submitCard';
  import { connect } from 'react-redux';
  import { setupMaster } from 'cluster';
  
  const renderField = ({ input, className, label, disabled, name,id,placeholder, value, type, meta: { touched, error } }) =&gt; (
  &lt;Form.Field&gt;
   &lt;label&gt;{label}&lt;span className=&quot;requiredMark&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
   &lt;div className={className}&gt;
   {id == 'cvv' || id === 'expirationDate' 
   ?
       &lt;Input className=&quot;small&quot; style={{&quot;width&quot; : &quot;50%&quot;}} size=&quot;mini&quot; disabled={disabled}  value={input} {...input} placeholder={placeholder} type={type} /&gt; 
   :
       &lt;Input className=&quot;small&quot; size=&quot;mini&quot; disabled={disabled}  value={input} {...input} placeholder={placeholder} type={type} /&gt;
  
   }
     {touched &amp;&amp; error &amp;&amp; &lt;span className=&quot;error-h&quot;&gt;{error}&lt;/span&gt;}
   &lt;/div&gt;
  &lt;/Form.Field&gt;
  )
  
  function EditCard(props) {
  const [open, setOpen] = React.useState(false)
  const {t,data} = props;
  const [state,setState] = useState();
  const [initialState,SetInitialState] = useState({})
  
  const { error, handleSubmit, pristine, initialValues, reset, submitting,text } = props;
  
  useEffect(() =&gt; {
   console.log(props,'CHECK PROPS HERE',data)
   setUser();
   setState(props.card)
   return () =&gt; {
     setState(null)
   }
  }, [props.card])
  
  async function setUser(){
   console.log(props.card,&quot;CHECK CARD&quot;,state)
   SetInitialState(props.card)
   props.dispatch({type : '@@redux-form/CHANGE',meta:{field: &quot;cardName&quot;,form: &quot;EditCard&quot;,persistentSubmitErrors: false,touch: false},payload :props.card.CardOwner})
   props.dispatch({type : '@@redux-form/CHANGE',meta:{field: &quot;cardNumber&quot;,form: &quot;EditCard&quot;,persistentSubmitErrors: false,touch: false},payload :props.card.CardNumber})
   props.dispatch({type : '@@redux-form/CHANGE',meta:{field: &quot;mail&quot;,form: &quot;EditCard&quot;,persistentSubmitErrors: false,touch: false},payload :store.get('userDetails')?.mail})
   props.dispatch({type : '@@redux-form/CHANGE',meta:{field: &quot;ClientID&quot;,form: &quot;EditCard&quot;,persistentSubmitErrors: false,touch: false},payload :store.get('userDetails')?.ClientID})
  
  }
  return (
   &lt;Modal
     onClose={() =&gt; setOpen(false)}
     onOpen={() =&gt; setOpen(true)}
     open={open}
     size={'tiny'}
     trigger={&lt;span&gt;&lt;i className=&quot;material-icons&quot;&gt;edit&lt;/i&gt; &lt;span&gt;{t(`GlobalButtons.Edit`)}&lt;/span&gt;&lt;/span&gt;}
     className=&quot;form-modal small-m&quot;
   &gt;
     &lt;Form initalState={initialState} onSubmit={handleSubmit(addPaymentMethodCard)} className=&quot;w-100&quot;&gt;
  
     &lt;Modal.Header className=&quot;modal-header&quot;&gt;
         &lt;h6&gt;Update Credit Card Details&lt;/h6&gt;
       &lt;div className=&quot;close-modal&quot; onClick={() =&gt; setOpen(false)}&gt;
         &lt;span className=&quot;material-icons&quot;&gt;close&lt;/span&gt;
       &lt;/div&gt;
     &lt;/Modal.Header&gt;
  
     &lt;Modal.Content className=&quot;modal-content&quot;&gt;
         &lt;Field label={t(`CreditCardOverlay.Name`)} component={renderField} placeholder='Name on Card' type=&quot;input&quot; id=&quot;cardName&quot; name=&quot;cardName&quot;&gt;
               &lt;/Field&gt;
         &lt;Field label={t(`CreditCardOverlay.Number`)} component={renderField} placeholder='Card Number' type=&quot;input&quot; id=&quot;cardNumber&quot; name=&quot;cardNumber&quot;&gt;
               &lt;/Field&gt;
  
               &lt;Grid columns={2} stackable&gt;
                   &lt;Grid.Row&gt;
                     &lt;Grid.Column&gt;
                       &lt;Field label={t(`CreditCardOverlay.ExpirationDate`)} component={renderField} placeholder='MM/YY' type=&quot;input&quot; id=&quot;expirationDate&quot; name=&quot;expirationDate&quot;&gt;
                       &lt;/Field&gt; 
                     &lt;/Grid.Column&gt;
                       
                     &lt;Grid.Column&gt;
                     &lt;Field label={t(`CreditCardOverlay.SecurityCode`)} component={renderField} placeholder='111' type=&quot;input&quot; id=&quot;cvv&quot; name=&quot;cvv&quot;&gt;
                       &lt;/Field&gt;
                     &lt;/Grid.Column&gt;
                   &lt;/Grid.Row&gt;
                 &lt;/Grid&gt;
         
           
         &lt;p style={{marginTop:'3rem'}}&gt;
           {t(`DebitCardOverlay.AuthorizationInfoText`)}
         &lt;/p&gt;
     &lt;/Modal.Content&gt;
  
     &lt;Modal.Actions className=&quot;modal-btn-footer&quot;&gt;
     &lt;Button size='small' disabled={submitting} onClick={(e) =&gt; { e.stopPropagation();if(!submitting){ return reset}}}&gt;
       {submitting ? 'Please wait...' :'Update'}
       &lt;/Button&gt;
       &lt;Button size='small' basic primary onClick={() =&gt; setOpen(false)}&gt;
         Cancel
       &lt;/Button&gt;
     &lt;/Modal.Actions&gt;
     &lt;/Form&gt;
  
   &lt;/Modal&gt;
  )
  }
  
  const getDerivedStateFromProps = (state,ownProps) =&gt; {
   console.log(state,&quot;EDIT CARD****-----&gt;&gt;&gt;&quot;,ownProps)
   // setUser()
     return {
       initialValues: {
         cardName : ownProps?.card?.CardOwner || '',
         cardNumber : ownProps?.card?.CardNumber || '',
         expirationDate: ownProps?.card?.CardExpirationDate || '',
         cvv : ownProps.card.cvv || '',
         mail : '',
         ClientID : '',
       },
     }
  
  }
  // export default AddBankAccount;
  
  export default connect(getDerivedStateFromProps)(reduxForm({ form: 'EditCard', 
  enableReinitialize: true, destroyOnUnmount: true,forceUnregisterOnUnmount: false
  })(EditCard));
  </code></pre>
  <p>Using EditCard Component to edit like.</p>
  <p><code>&lt;EditCard t={t} key={key} card={data}/&gt;</code></p>
  <p><strong>NOTE: Data in the edit card is from the array and is a modal.</strong>
  Any help in this is highly appreciated and thanks in advance.</p>