javascript - ReactJS and inheritance -

i'm trying implement remove function hierarchical components. being app.jsx > notes.jsx > note.jsx. , making simple to-do list im following tutorial. i've loaded babel , have hard time understanding why deletes whole todo list rather single list element.

app.jsx :

import react 'react'; import note './note'; import notes './notes';  export default class app extends react.component {     constructor(props) {     super(props);      this.state = {       notes: [{         task: 'learn webpacks'       }, {         task: 'learn react'       }, {         task: 'do laundry'       }]     };   }       render() {         var notes = this.state.notes;         return (           <div>             <button onclick= {()=>this.additem()}> + </button>             <notes items = {notes}             onedit = {(i, task) => this.itemedited(i, task)}              removeitem = {(i) => this.removeitem(i)}               />              </div>             );       }      itemedited(i, task) {     var notes = this.state.notes;      if(task) {       notes[i].task = task;     }     else {       notes = notes.slice(0, i).concat(notes.slice(i + 1));     }      this.setstate({       notes: notes     });   }       additem() {         this.setstate({         notes : this.state.notes.concat([{             task : 'new task'         }])          });     }      removeitem(i) {     var notes = this.state.notes;     this.setstate({         notes : this.state.notes.slice(0, i)     });     } } 

notes.jsx

import react 'react'; import note './note';  export default class notes extends react.component {     render() {         var notes = this.props.items;          return(         <ul classname='notes'>{notes.map((note, i) =>             <li classname = 'note' key = {'note' + i}>                 <note value = {note.task}                  onedit = {this.props.onedit.bind(null, i)}                  removeitem = {this.props.removeitem.bind(null, i)}                  />                </li>             )}</ul>         );     } } 

note.jsx

import react 'react';  export default class note extends react.component {      constructor(props) {         super(props);          this.state = {         edited: false         };     }      render() {         const {value, onedit, ...props} = this.props;         var edited = this.state.edited;              return (                 <div {...props}> {                     edited                     ? <input type = 'text'                       defaultvalue = {value}                       onblur = {(e) => this.finishedit(e)}                       onkeypress={(e) => this.checkenter(e)}/>                     : <div onclick={() => this.edit()}> {value} </div>                 }                 <button onclick = {(i) => this.props.removeitem(i             )}>-</button>                   </div>              );         }          edit() {         this.setstate({edited: true});         }          checkenter(e) {         if(e.key === 'enter') {           this.finishedit(e);             }         }          finishedit(e) {         this.props.onedit(e.target.value);         this.setstate({edited:false});         }    } 

everything works fine removing single list element, instead of deleting element deletes whole list. think has logic of passing down removeitem, don't know has passed down. way see it, note individual note/list element in order remove function have trickle down class correct?

edited: attempt of how think should work.

what had went wrong 1: not binding null this.props.removeitem.bind(i)

secondly slicing whole thing when intended splice it, instead did this:

removeitem(i) {     var notes = this.state.notes;     notes = notes.slice(0, i).concat(notes.slice(i + 1));     this.setstate({         notes : notes     });     } 

take elements before list , concatenate after. although notes = notes.splice(i, 1) should work correct? tried it, remove element.