title: Why React list slice always delete the last row
body: <p>I have similar code in Angular and it works great. I tried to convert the code into React version. It works great except when I try to delete a row. Every delete click removes the last row. My expectation is to remove the row I'm clicking the "remove" button. I'm passing the index item that needs to be deleted. I provided the sample below and you can try it here as well... <a href="https://jsfiddle.net/w6cy0bx1/11/" rel="nofollow noreferrer">https://jsfiddle.net/w6cy0bx1/11/</a></p>
  
  <pre><code>class MineCts extends React.Component{
  constructor(props){
  super(props);
  this.state = {
  items:[]
  };
  }
  
  render(){
  return(
  &lt;div&gt;
    &lt;div&gt;&lt;button onClick={(event)=&gt;this.add(event)} &gt;Add&lt;/button&gt;&lt;/div&gt;
    &lt;div&gt;
      This is sample:
      {this.state.items.map((record, index)=&gt;{
      return(
      &lt;table&gt;
        &lt;tr key={index}&gt;
          &lt;td&gt; &lt;input id="Name" value={record.Name} onChange={this.onDataChange}/&gt; &lt;/td&gt;
          &lt;td&gt; &lt;input id="Counter" value={record.Counter} onChange={this.onDataChange} /&gt; &lt;/td&gt;
          &lt;td&gt;&lt;button onClick={(event)=&gt;this.remove(event, record, index)} &gt;Remove&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      )
      })}
  
    &lt;/div&gt;
  &lt;/div&gt;
  )
  }
  
  onDataChange(e)
  {
  console.log(e.target.id)
  this.setState({[e.target.id]:e.target.value})
  }
  
  add(e){
  let rows = this.state.items;
  rows.push({});
  this.setState({items:rows})
  }
  
  remove(e, record, index){
  console.log(record)
  console.log(index)
  let rows = this.state.items;
  rows.splice(index, 1);
  this.setState({items:rows})
  }
  
  }
  
  
  
  ReactDOM.render(&lt;MineCts /&gt;, mountNode)
  </code></pre>