Previous values are not preserving in ReactJS when I add new row

Question

I am working SPFx with React framework. I am also utilizing MS Fabric Textbox controls. I have created an interface as below

export interface ICurrentState {  
  expenseRows:any
}

I am initializing this interface in constructor.

public constructor(props: IExpenseClaimProps, state: ICurrentState) {
    super(props);
    this.state = {      
      expenseRows:[{Title:'',Category:'',Amount:'',Date:'',Details:''}]
    };
  }

I have created a function like below for adding rows.

const ExpenseDetailField=(props)=>{
  const {Title,Category,Amount,Date,Details}=props;
  return(
    <div className='ms-Grid-row'>
      <div className='ms-Grid-col ms-lg3 ms-md3 ms-sm3'>
        <TextField required={true} label='Title' value={Title}/>
      </div>
      <div className='ms-Grid-col ms-lg2 ms-md2 ms-sm2'>
        <TextField required={true} label='Category' value={Category}/>
      </div>
      <div className='ms-Grid-col ms-lg2 ms-md2 ms-sm2'>
        <TextField required={true} label='Amount' value={Amount}/>
      </div>
      <div className='ms-Grid-col ms-lg2 ms-md2 ms-sm2'>
        <TextField required={true} label='Expense Date' value={Date}/>
      </div>
      <div className='ms-Grid-col ms-lg3 ms-md3 ms-sm3'>
        <TextField required={true} label='Details' multiline value={Details}/>
      </div>
    </div>
  );

I am adding below function render method.

this.state.expenseRows.map((element,ind) => {                       
          return (            
            <ExpenseDetailField Title={element.Title} Category={element.Category} Amount={element.Amount} Date={element.Date} Details={element.Details} />
          );          
        })

And I am having button which will trigger adddExpenseDetailsRow function to add new row.

adddExpenseDetailsRow(){       
    const rows = [...this.state.expenseRows,{Title:'',Category:'',Amount:'',Date:'',Details:''}];
    this.setState(prevState=>({
      expenseRows:rows,
    }))
  }

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?

TextField is coming from ms-fabric: https://developer.microsoft.com/en-us/fabric#/components/textfield — Mihir, Jan 24 '18 at 07:55
You still need to save those values somehow. `TextField` has a prop called `onChanged` (I just read their documentation) which you can use to update the state with the correct value. — Hemerson Carlin, Jan 24 '18 at 07:58
@mersocarlin true. But if there are 10 rows then how to store all the values in that? — Mihir, Jan 24 '18 at 09:17
@Mihir What about looking into the documentation? https://reactjs.org/docs/lists-and-keys.html — Sulthan, Jan 24 '18 at 16:27

Previous values are not preserving in ReactJS when I add new row

0 Answers0