reactjs - How to make Material-UI Dynamic + Modifiable List? -

so far, i've made this:

youtube video - problem visualized here

although, have frustrating problem.

as can see in youtube video, whichever item list delete, re-renders without last one.

code behind this:

@observer export default class listinterface extends component {     @observable datasource = [];     @observable itemtoadd = "";     constructor(props) {         super(props);         let {id} = this.props;         this.state = { id };     }     @action updateitemtoadd(searchtext, datasource, params) {         this.itemtoadd = searchtext;     }     @action handlechange(searchtext, datasource, params, index) {         this.datasource[index] = datasource;     }      @action addobject() {         this.datasource.push({productname: this.itemtoadd});         console.log("added component!");         console.log(this.itemtoadd);         console.log("----------------------------\n");         this.itemtoadd = "";     }      @action removeobject(index) {         console.log("removed component!");         console.log(this.datasource[index].productname);         this.datasource.splice(index-1, 1);         console.log(this.datasource);         console.log("----------------------------\n");     }      getobject(i) {         return this.datasource[i];     }      getlist() {         return this.datasource.slice();     }      createui() {         let uiitems = [];         let i;         for(i = 0; < this.datasource.length; i++) {             uiitems.push(                 <div classname="listitem" key={i}>                     <col sm={10}>                         <muithemeprovider>                             <textfield                                 id={i.tostring()}                                 value={this.state.datasource[i].productname}                                 floatinglabeltext="product"                                 disabled={true}                                 fullwidth={true}                             />                         </muithemeprovider>                     </col>                     <col sm={2}>                         <muithemeprovider id={i.tostring()}>                             <floatingactionbutton                                 mini={true}                                 secondary={true}                                 onclick={this.removeobject.bind(this, i)}                                 classname="listbutton"                             >                                 <contentremove/>                             </floatingactionbutton>                         </muithemeprovider>                     </col>                 </div>             );         }          uiitems.push(             <div classname="listadditem" key={this.datasource.length}>                 <col sm={10}>                     <muithemeprovider>                         <autocomplete                             id={i.tostring()}                             floatinglabeltext="product"                             datasource={["apostolis", "orestis", "germanos", "kwnstantina", "tasos"]}                             openonfocus={true}                             onupdateinput={this.updateitemtoadd.bind(this)}                             fullwidth={true}                          />                     </muithemeprovider>                 </col>                 <col sm={2}>                     <muithemeprovider>                         <floatingactionbutton                             mini={true}                             classname="listbutton"                             onclick={this.addobject.bind(this)}                         >                             <contentadd/>                         </floatingactionbutton>                     </muithemeprovider>                 </col>             </div>         );          return uiitems;     }      render() {         let {id} = this.state;         return (             <div id={id} classname="listinterface">                 <panel header={id}>                     <form>                         {this.createui()}                     </form>                 </panel>             </div>         );     } } 

i don't understand logic behind this. i've watched countless videos , docs on reactjs, reactjs reloads reactdom don't understand in specific case, how? why last component instead of the 1 selected deleted? isn't supposed re-render createui() once uses controlled variables? cause grab correct elements list?

my thought on this, once object deleted datasource array, causes --datasource.length , starts re-rendering. , maybe react realizes texts controlled, causes two-way binding , pushes values datasource, causes last 1 removed missing. possibly i'm wrong , else going on.

possibly bug somewhere else can't detect.

i come in stackoverflow last, when can't find else. sorry if don't find question pleasing.

flow: (my understanding far)

render() -> calls createui()

createui() -> returns list of controlled components @observable variables

plus sign button -> calls addobject(), adds @observable itemtoadd in datasource list -> this causes re-rendering means react calls createui() again? renders again item in datasource list?

minus sign button -> calls removeobject(), removes object in index given binded component -> then should "re-render" createui() function in respect new data in datasource. bug happens , instead last visualized component removed, but correct object datasource removed. why?