Making dynamic form inputs with React

Question

how to update the nested fields in react forms .,

here i do

add a new item handleAddShareholder ,

delete an existing item handleRemoveShareholder ,

change details of an item handleShareholderNameChange

then i will push a new array to shareholders.customize by this

handleAddcomp = idx => () => {
    this.state.shareholders[idx].customize.push({ name: '' });
    const shareholders = this.state.shareholders;
    this.setState({ shareholders: shareholders });
  };

but i can't able to update the field value of nested arrays in react.js

my code is here https://jsbin.com/fugemuy/edit?html,js,output

Answer 1

Use Object.assign for this purpose. It will clone current object.

handleAddcomp = idx => () => {
    let shareholders = Object.assign({}, this.state.shareholders); //creating copy of object in state
    shareholders[idx].customize.push({ name: '' })
    this.setState({ shareholders });
};