title: Previous values are not preserving in ReactJS when I add new row
body: <p>I am working SPFx with React framework. I am also utilizing <a href="https://developer.microsoft.com/en-us/fabric#/components/textfield" rel="nofollow noreferrer">MS Fabric Textbox controls</a>. I have created an interface as below</p>
  
  <pre><code>export interface ICurrentState {  
    expenseRows:any
  }
  </code></pre>
  
  <p>I am initializing this interface in constructor. </p>
  
  <pre><code>public constructor(props: IExpenseClaimProps, state: ICurrentState) {
      super(props);
      this.state = {      
        expenseRows:[{Title:'',Category:'',Amount:'',Date:'',Details:''}]
      };
    }
  </code></pre>
  
  <p>I have created a function like below for adding rows.</p>
  
  <pre><code>const ExpenseDetailField=(props)=&gt;{
    const {Title,Category,Amount,Date,Details}=props;
    return(
      &lt;div className='ms-Grid-row'&gt;
        &lt;div className='ms-Grid-col ms-lg3 ms-md3 ms-sm3'&gt;
          &lt;TextField required={true} label='Title' value={Title}/&gt;
        &lt;/div&gt;
        &lt;div className='ms-Grid-col ms-lg2 ms-md2 ms-sm2'&gt;
          &lt;TextField required={true} label='Category' value={Category}/&gt;
        &lt;/div&gt;
        &lt;div className='ms-Grid-col ms-lg2 ms-md2 ms-sm2'&gt;
          &lt;TextField required={true} label='Amount' value={Amount}/&gt;
        &lt;/div&gt;
        &lt;div className='ms-Grid-col ms-lg2 ms-md2 ms-sm2'&gt;
          &lt;TextField required={true} label='Expense Date' value={Date}/&gt;
        &lt;/div&gt;
        &lt;div className='ms-Grid-col ms-lg3 ms-md3 ms-sm3'&gt;
          &lt;TextField required={true} label='Details' multiline value={Details}/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  </code></pre>
  
  <p>I am adding below function <code>render</code> method.</p>
  
  <pre><code>this.state.expenseRows.map((element,ind) =&gt; {                       
            return (            
              &lt;ExpenseDetailField Title={element.Title} Category={element.Category} Amount={element.Amount} Date={element.Date} Details={element.Details} /&gt;
            );          
          })
  </code></pre>
  
  <p>And I am having button which will trigger <code>adddExpenseDetailsRow</code> function to add new row. </p>
  
  <pre><code>adddExpenseDetailsRow(){       
      const rows = [...this.state.expenseRows,{Title:'',Category:'',Amount:'',Date:'',Details:''}];
      this.setState(prevState=&gt;({
        expenseRows:rows,
      }))
    }
  </code></pre>
  
  <p>Upto here it is working fine. But if I fill some values in textboxes and click on Addrow button then new row is adding but, existing values are disappearing. What I am doing wrong in this?</p>