title: React list rendering wrong data after deleting item
body: <p>I have a simple list of student objects with name and their scores in state.</p>
  <p>Their name is bound to <code>&lt;b&gt;{student.name}&lt;/b&gt;</code> and their score is bound to</p>
  <pre><code>&lt;input type=&quot;text&quot; defaultValue={student.score}/&gt;
  </code></pre>
  <p>Whenever I want to delete the first student from this list and
  re-rendering the component by calling set state.</p>
  <p>The input tag of the second student showing the score of the first student instead of having its own. Why this happening where I am doing it wrong ??</p>
  <p><a href="https://jsbin.com/wuzaqoyepo/edit?html,js,output" rel="nofollow noreferrer">Here is my code jsbin</a></p>
  <pre><code>class App extends React.Component{
    constructor(){
      super();
      this.state ={
        students:[{name:&quot;A&quot;,score:10},{name:&quot;B&quot;,score:20},{name:&quot;C&quot;,score:30}]
      }
    }
    
    onDelete(index){
      this.state.students.splice(index,1);
      this.setState(this.state);
    }
    
     render(){
       return(
         &lt;div&gt;
           {this.state.students.map((student,index)=&gt;{
                return(
                  &lt;div key={index}&gt;
                      &lt;b&gt;{student.name}&lt;/b&gt; - &lt;input type=&quot;text&quot; defaultValue={student.score}/&gt;
                       &lt;button onClick={this.onDelete.bind(this,index)}&gt;delete&lt;/button&gt;
                  &lt;/div&gt;                
                )
           })}
         &lt;/div&gt;
       )
     }
  }
  
  
  ReactDOM.render(&lt;App/&gt;,document.getElementById(&quot;main&quot;));
  </code></pre>