title: Splicing element from array in react.js
body: <p>I want to splice element from array in my todo app. As per code the first element is getting removed even if I click 2nd or 3rd remove button. Button used for removing element invokes remove(i) function,Here is my code for todo:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    class App extends React.Component {
  
        constructor(){
          super();
          this.state={
            todo:[]
          };
        };
  
        entertodo(keypress){
          var Todo=this.refs.inputodo.value;
          if( keypress.charCode == 13 )
          {
            this.setState({
              todo: this.state.todo.concat({Value:Todo, Decor:'newtodo animated fadeInLeft', checked:false})
            });
            this.refs.inputodo.value=null;
          };
        };
        todo(text,i){
          return (
            &lt;li onClick={this.completes.bind(this,i)}className={text.Decor}&gt;
              &lt;input type="checkbox" onChange={this.todoCompleted.bind(this,i)}className="option-input checkbox" checked={text.checked} /&gt;
              &lt;div key={text.id}  className="item"&gt;
                {text.Value}
                &lt;button type="button" className="destroy" onClick={this.remove.bind(this)}&gt;X&lt;/button&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          );
        };
  
        remove(i){
          this.state.todo.splice(i,1)
          this.setState({todo:this.state.todo})
        };
        todoCompleted(i){
          var todo={...this.state.todo}
          if(todo[i].checked){
            this.state.todo[i].checked = false;
            this.state.todo[i].Decor='newtodo'
            this.setState({
              todo: this.state.todo
            });
          }
          else {
            this.state.todo[i].checked = true;
            this.state.todo[i].Decor= 'strike'
            this.setState({
              todo: this.state.todo
            });
          }
        }; 
        allDone= ()=&gt;{
          var todo = this.state.todo;
          
          todo.forEach(function(item) {
            item.Decor = "newtodo animated fadeInLeft strike"
          })
          this.setState({todo: todo});
        };
         completes(i){
      var todo={...this.state.todo}
      if(todo[i].Decor==='newtodo'){
        this.state.todo[i].Decor='line'
        this.setState({
          todo: this.state.todo
        });
      }
      else {
        this.state.todo[i].Decor= 'newtodo'
        this.setState({
          todo: this.state.todo
        });
      }
    };
  
  
          render() {
            return (
              &lt;div&gt;
                &lt;h1 id='heading'&gt;todos&lt;/h1&gt;
                &lt;div className="lines"&gt;&lt;/div&gt;
                  &lt;div&gt;
                    &lt;input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/&gt;
                    &lt;span onClick={this.allDone}id="all"&gt;x&lt;/span&gt;
                  &lt;/div&gt;
                &lt;div className="mainapp"&gt;
                  &lt;ul&gt;
                  {this.state.todo.map(this.todo.bind(this))}
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            );
          }
        }  
        ReactDOM.render(&lt;App/&gt;,document.getElementById('app'));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.strike {
    text-decoration: line-through;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends React.Component {
  
    constructor(){
      super();
      this.state={
        todo:[]
      };
    };
  
    entertodo(keypress){
      var Todo=this.refs.inputodo.value;
      if( keypress.charCode == 13 )
      {
        this.setState({
          todo: this.state.todo.concat({Value:Todo, Decor:'newtodo animated fadeInLeft', checked:false})
        });
        this.refs.inputodo.value=null;
      };
    };
    todo(text,i){
      return (
        &lt;li ocClick={this.completes.bind(this,i)}className={text.Decor}&gt;
          &lt;input type="checkbox" onChange={this.todoCompleted.bind(this,i)}className="option-input checkbox" checked={text.checked} /&gt;
          &lt;div key={text.id}  className="item"&gt;
            {text.Value}
            &lt;button type="button" className="destroy" onClick={this.remove.bind(this)}&gt;X&lt;/button&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      );
    };
  
    remove(i){
      this.state.todo.splice(i,1)
      this.setState({todo:this.state.todo})
    };
    todoCompleted(i){
      var todo={...this.state.todo}
      if(todo[i].checked){
        this.state.todo[i].checked = false;
        this.state.todo[i].Decor='newtodo'
        this.setState({
          todo: this.state.todo
        });
      }
      else {
        this.state.todo[i].checked = true;
        this.state.todo[i].Decor= 'strike'
        this.setState({
          todo: this.state.todo
        });
      }
    }; 
    allDone= ()=&gt;{
      var todo = this.state.todo;
      
      todo.forEach(function(item) {
        item.Decor = "newtodo animated fadeInLeft strike"
      })
      this.setState({todo: todo});
    };
     completes(i){
      var todo={...this.state.todo}
      if(todo[i].Decor==='newtodo'){
        this.state.todo[i].Decor='line'
        this.setState({
          todo: this.state.todo
        });
      }
      else {
        this.state.todo[i].Decor= 'newtodo'
        this.setState({
          todo: this.state.todo
        });
      }
    };
  
      render() {
      return (
          &lt;div&gt;
            &lt;h1 id='heading'&gt;todos&lt;/h1&gt;
            &lt;div className="lines"&gt;&lt;/div&gt;
              &lt;div&gt;
                &lt;input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/&gt;
                &lt;span onClick={this.allDone}id="all"&gt;x&lt;/span&gt;
              &lt;/div&gt;
            &lt;div className="mainapp"&gt;
              &lt;ul&gt;
              {this.state.todo.map(this.todo.bind(this))}
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }  
    ReactDOM.render(&lt;App/&gt;,document.getElementById('app'));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.strike {
    text-decoration: line-through;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>