title: ant design - Modal value reset on "cancel" and "X" close button - API RESPONSE BASE REACT JS
body: <p>Using <code>.map</code>, I mapped all cards and each card has an edit button, so when I click the edit button it opens a Modal (antd) that has a form with input values. Values are bound with API, and when I open any card model it shows perfect values in input.</p>
  
  <p>Problem is, when I click any other card's edit button, it shows again the same values (previous popup values)</p>
  
  <p>code:</p>
  
  <pre><code>{surveys.length &gt; 0 &amp;&amp; surveys.map((survey, i) =&gt; (
    &lt;Col className="gutter-row" xs={24} sm={12} md={12} lg={6} xl={6} key={survey.publicID}&gt;
      &lt;Card
        cover={&lt;Link to='/survey'&gt;&lt;img alt="example" src={ survey.imagePath || "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"} /&gt;&lt;/Link&gt;}
        actions={[
          &lt;img className="icons-svgs" src="/svg/Share.svg" onClick={() =&gt; this.onHandleShareSurvey(survey)} /&gt;, 
          &lt;img className="icons-svgs" src="/svg/Edit.svg" onClick={() =&gt; this.onHandleEditSurvey(survey)} /&gt;, 
          &lt;img className="icons-svgs" src="/svg/Duplicate.svg" onClick={()=&gt;this.onHandleDuplicateSurvey(survey)} /&gt;, 
          &lt;img className="icons-svgs" src="/svg/Delete.svg" onClick={() =&gt; this.onHandleDeleteSurvey(survey)}/&gt;
        ]} &gt;
        &lt;Row type="flex" align="middle"&gt;
          &lt;Col span={18}&gt;
          &lt;Link to='/survey'&gt;
            &lt;Meta
              title={survey.Name}
              description={survey.Description}
            /&gt;
          &lt;/Link&gt;
          &lt;/Col&gt;
          &lt;Col type="flex" span={6} align="middle"&gt;
            &lt;span onClick={()=&gt; this.setUploadDataSurvey(true)}&gt;
              &lt;Icon type="upload" className="upload-icon"/&gt;
            &lt;/span&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Card&gt;
    &lt;/Col&gt;
  ))}
  </code></pre>
  
  <p>And popup component is:</p>
  
  <pre><code>&lt;Modal
      visible={visible}
      onCancel={onCancel}
      // onOk={() =&gt; this.setEditSurvey(false)}
      title="Edit survey"
      className= "surveys-popup"
      style={{ top: 20 }}
      destroyOnClose={true}
      footer={false}
  &gt;
      &lt;Form onSubmit={this.handleEdit}&gt;
      &lt;p className="form-title"&gt;What is your product?&lt;/p&gt;
  
      &lt;FormItem key={10}&gt;
      {getFieldDecorator('Name', {
        rules: [{ required: false, message: 'Title Can\'t leave blank' }],
      })(
        &lt;div className="form-input"&gt;
          &lt;Input ref="Name" defaultValue={survey.Name}/&gt;
        &lt;/div&gt;
      )}
      &lt;/FormItem&gt;
       &lt;p className="form-title"&gt;Please describe your product&lt;/p&gt;
      &lt;div className="form-input"&gt;
      &lt;FormItem key={11}&gt;
      {getFieldDecorator('Description', {
        rules: [{ required: false, message: 'Description Can\'t leave blank' }],
      })(
        &lt;div className="form-input"&gt;
          &lt;TextArea autosize={{ minRows: 2, maxRows: 6 }} ref="Description" defaultValue={survey.Description}/&gt;        
        &lt;/div&gt;
      )}
      &lt;/FormItem&gt;
      &lt;/div&gt;
  
      &lt;div span={24} className="upload-images-container"&gt;
        &lt;div className="clearfix"&gt;
          &lt;Upload
          action="//jsonplaceholder.typicode.com/posts/"
          listType="picture-card"
          fileList={fileList}
          onChange={this.handleChange}
          &gt;
          {fileList.length &gt;= 3 ? null : uploadButton}
          &lt;/Upload&gt;
        &lt;/div&gt;
  
  
      &lt;/div&gt;
      &lt;p className="form-title"&gt;Define your probability model &lt;Icon type="info-circle" className="small-icon" /&gt;&lt;/p&gt;
      &lt;div className="model-table"&gt;
        &lt;div className="table-column"&gt;
          &lt;div span={24} className="model-table-title"&gt;Too cheap %&lt;/div&gt;
          &lt;div span={24} className="model-table-value"&gt;
          &lt;FormItem key={12}&gt;
            {getFieldDecorator('tooCheap', {
              rules: [{ required: false, message: '' }],
            })(
              &lt;div className="form-input"&gt;
                &lt;Input type="number" defaultValue={survey.tooCheap}/&gt;        
              &lt;/div&gt;
            )}
            &lt;/FormItem&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="table-column"&gt;
          &lt;div span={24} className="model-table-title"&gt;Very cheap %&lt;/div&gt;
          &lt;div span={24} className="model-table-value"&gt;
          &lt;FormItem key={13}&gt;
            {getFieldDecorator('veryCheap', {
              rules: [{ required: false, message: '' }],
            })(
              &lt;div className="form-input"&gt;
                &lt;Input type="number" defaultValue={survey.veryCheap}/&gt;        
              &lt;/div&gt;
            )}
            &lt;/FormItem&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="table-column"&gt;
          &lt;div span={24} className="model-table-title"&gt;Cheap %&lt;/div&gt;
          &lt;div span={24} className="model-table-value"&gt;
            &lt;FormItem key={14}&gt;
            {getFieldDecorator('cheap', {
              rules: [{ required: false, message: '' }],
            })(
              &lt;div className="form-input"&gt;
                &lt;Input type="number" defaultValue={survey.cheap}/&gt;        
              &lt;/div&gt;
            )}
            &lt;/FormItem&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="table-column"&gt;
          &lt;div span={24} className="model-table-title"&gt;Correct price %&lt;/div&gt;
          &lt;div span={24} className="model-table-value"&gt;
            &lt;FormItem key={15}&gt;
            {getFieldDecorator('correctPrice', {
              rules: [{ required: false, message: '' }],
            })(
              &lt;div className="form-input"&gt;
                &lt;Input type="number" defaultValue={survey.correctPrice}/&gt;        
              &lt;/div&gt;
            )}
            &lt;/FormItem&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="table-column"&gt;
          &lt;div span={24} className="model-table-title"&gt;Expensive %&lt;/div&gt;
          &lt;div span={24} className="model-table-value"&gt;
            &lt;FormItem key={16}&gt;
            {getFieldDecorator('expensive', {
              rules: [{ required: false, message: '' }],
            })(
              &lt;div className="form-input"&gt;
                &lt;Input type="number" defaultValue={survey.expensive}/&gt;        
              &lt;/div&gt;
            )}
            &lt;/FormItem&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;Row&gt;
      &lt;Col xs={24} sm={12} md={12} lg={12} xl={12}&gt;
        &lt;div className="form-title"&gt;&lt;p&gt;Choose a password &lt;Icon type="info-circle" className="small-icon" /&gt; (optional)&lt;/p&gt;
        &lt;div&gt;
          &lt;FormItem key={17}&gt;
          {getFieldDecorator('password', {
            rules: [{ required: false, message: '' }],
          })(
            &lt;div className="form-input"&gt;
              &lt;Input /&gt;        
            &lt;/div&gt;
          )}
          &lt;/FormItem&gt;
          &lt;FormItem key={17} className="hidden"&gt;
          {getFieldDecorator('publicID', {
            rules: [{ required: false, message: '' }],
          })(
            &lt;div className="form-input"&gt;
              &lt;Input value={survey.publicID}/&gt;        
            &lt;/div&gt;
          )}
          &lt;/FormItem&gt;
          {/* &lt;input value={survey.publicID} ref="publicID"/&gt; */}
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Col&gt;
      &lt;Col xs={24} sm={12} md={8} lg={8} xl={8} offset={4}&gt;
        &lt;div className="form-title"&gt;
        &lt;p&gt;(optional)&lt;/p&gt;
        &lt;div&gt;
          &lt;Upload key={10}&gt;
          &lt;Button&gt;&lt;Icon type="upload" /&gt; UPLOAD DATA&lt;/Button&gt;
          &lt;/Upload&gt;
  
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Col&gt;
      &lt;/Row&gt;
      &lt;Row className="footer-cta"&gt;
        &lt;Button key="back" onClick={onCancel}&gt;Cancel&lt;/Button&gt;
        &lt;Button key="submit" type="primary" visible={visible} htmlType="submit" onClick={onCancel}&gt;
          Save
        &lt;/Button&gt;
      &lt;/Row&gt;
    &lt;/Form&gt;
  &lt;/Modal&gt;
  </code></pre>