title: React list rendering wrong(cache)data after deleting item
body: <p>I have one add Room Popup in one React Component where a user can add one or more rooms and provide description of Rooms with some Input Fields. </p>
  
  <p>The Add functionality is Working fine. But Suppose if I delete second Room(Room 2) after Adding Room1,Room2,Room3 with respective descriptions, the display shows Room 1 and Room2 instead of Room1 and Room3. I am also maintaining a array of objects to be sent as json to Service where each object represents one room and after deleting the Room2, array gets updated correctly with only Room 1 and Room3 data.The react re-renders the pop-up with console.log showing the array data of Room1 and Room3 but on screen only room1 and room2 data gets displayed. </p>
  
  <pre><code>getInitialState() {
  
      return {
           add_rooms:[{
          "resourceEmail":"",
          "resourceName":"",
          "resourceLocation":"Australia-Melbourne",
          "resourceType":"",
          "resourceDesc":"",
          "resourcePhone":"",
          "resourceCapacity":"",
          "systemId":"",
          "resourceStatus":"Y",
          "groupMailId":"",
          "resourceDropStatus":""
      }],
   }  
    },
  
  
  
  
  
          &lt;Modal id="modal_edit" 
        show={this.state.show_add}
        onHide={this.hideModal}
        container={this}
        aria-labelledby="contained-modal-title"&gt; 
  
         &lt;Modal.Body&gt;
        &lt;span className="popup_close" onClick={this.closeAddpop}&gt;&lt;/span&gt;
        &lt;div className="pop_head_edit"&gt;
          ADD ROOMS
  
       &lt;/div&gt;
        &lt;div className="pop_ul_div" id="add_modal" &gt;
          {this.state.add_rooms.map(function(add,index)
                  {
  
                      console.log("re-rendering");
                    console.log("addrooms",this.state.add_rooms);
                  console.log("index "+ index);
                      return(&lt;ul className="pop_ul add_rooms_ul" id={"add_room_list_"+index}&gt;
           &lt;li&gt;
             &lt;span&gt;LOCATION&lt;/span&gt;
            &lt;select value={this.state.add.resourceLocation}  onChange={this.handleRoomAdd.bind(this,"location",index)}&gt;
               {this.state.room_locations.map(function(obj,ind){
               return(
               &lt;option value={obj}&gt;{obj}&lt;/option&gt;)}.bind(this))}
            &lt;/select&gt; 
                      &lt;/li&gt;
  
            &lt;li&gt;
             &lt;span&gt;ROOM NAME&lt;/span&gt;
                &lt;input type="text" name="name"    value={this.state.add.resourceName}  onChange={this.handleRoomAdd.bind(this,"name",index)}/&gt;
           &lt;/li&gt;
             &lt;li&gt;
             &lt;span&gt;ROOM DESCRIPTION&lt;/span&gt;
             &lt;input type="text" name="desc" maxLength="25"  value={this.state.add.resourceDesc}   onChange={this.handleRoomAdd.bind(this,"desc",index)}/&gt;
           &lt;/li&gt;
           &lt;li&gt;
             &lt;span&gt;ROOM CAPACITY&lt;/span&gt;
           &lt;input type="text" maxLength="3" value={this.state.add.resourceCapacity}  onChange={this.handleAddCapacityChange.bind(this,index)}/&gt;
           &lt;/li&gt;
             &lt;li&gt;
             &lt;span&gt;ROOM TYPE&lt;/span&gt;
               &lt;select value={this.state.add.resourceType}    onChange={this.handleRoomAdd.bind(this,"type",index)} &gt;
               {this.state.roomTypeList.map(function(obj,ind){
               return(
               &lt;option value={obj}&gt;{obj}&lt;/option&gt;)}.bind(this))}
             &lt;/select&gt;
           &lt;/li&gt;
                     &lt;li&gt;
             &lt;span&gt;ROOM STATUS&lt;/span&gt;
              &lt;select value={this.state.add.resourceDropStatus} onChange={this.handleRoomAdd.bind(this,"dropStatus",index)}&gt;
               {this.state.roomStatusList.map(function(obj,ind){
               return(
               &lt;option value={obj}&gt;{obj}&lt;/option&gt;)}.bind(this))}
             &lt;/select&gt;
           &lt;/li&gt;
  
             &lt;li&gt;
             &lt;span&gt;ROOM PHONE NUMBER&lt;/span&gt;
        &lt;input type="text" name=""  maxLength="25"  value={this.state.add.resourcePhone}   onChange={this.handleAddNumberChange.bind(this,index)}/&gt;
           &lt;/li&gt;
             &lt;li&gt;
             &lt;span&gt;ROOM EMAIL&lt;/span&gt;
             &lt;input type="text" value={this.state.add.resourceEmail}  onBlur={this.handleRoomAdd.bind(this,"email",index)}/&gt;
           &lt;/li&gt;
             &lt;li&gt;
             &lt;span&gt;SYSTEM ID AS IN CISCO TMS&lt;/span&gt;
               &lt;input  type="text"  value={this.state.add.systemId}  onChange={this.handleAddSysIdChange.bind(this,index)}/&gt;
           &lt;/li&gt;
            &lt;li&gt;
             &lt;span&gt;LOCATION IMG EMAIL&lt;/span&gt;
             &lt;input type="text" name="" maxLength="200"  value={this.state.add.groupMailId}   onBlur={this.handleRoomAdd.bind(this,"groupMail",index)}/&gt;
           &lt;/li&gt;
           &lt;li&gt;
  
           &lt;/li&gt;
           &lt;li&gt;
             &lt;button className="del_room" onClick={this.del_click.bind(this,index)}&gt;&lt;/button&gt;
           &lt;/li&gt;
         &lt;/ul&gt;)}.bind(this))}
         &lt;div className="add_room_div"&gt;
           &lt;button className="add_rooms" onClick={this.add_click}&gt;&lt;/button&gt;
         &lt;/div&gt;
       &lt;/div&gt;
       &lt;div className="footer_edit_pop"&gt;
         &lt;div className="update_chk_bx_div"&gt;
            &lt;div className="chk_div"&gt;
  &lt;button className="dwnld_img" onClick={this.saveAddPop}&gt;SAVE&lt;/button&gt;
  &lt;button className="dwnld_img" onClick={this.closeAddpop}&gt;CANCEL&lt;/button&gt;
      &lt;/div&gt;
  
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;/Modal.Body&gt;
        &lt;/Modal&gt;
  
              {this.state.loading?
          &lt;div&gt;
          &lt;div className = "loader_react"&gt;&lt;/div&gt;
          &lt;div className = "loader_block_react"&gt;&lt;/div&gt;   
          &lt;/div&gt;
          :
          null
          }
       &lt;/div&gt;
  
  
        )
    }
  })
  
  
      add_click: function()
          {       
          var addRoom ={
              "resourceEmail":"",
              "resourceName":"",
              "resourceLocation":"Australia-Melbourne",
              "resourceType":"",
              "resourceDesc":"",
              "resourcePhone":"",
              "resourceCapacity":"",
              "systemId":"",
              "resourceStatus":"Y",
              "groupMailId":"",
              "resourceDropStatus":""
              };
              this.state.add_rooms.push(addRoom);
  
  
          },
  
   del_click: function(index)
      {
                //debugger;
                  let mainIndex=index;
                  console.log("mainIndex", mainIndex);
                    var rooms= this.state.add_rooms
                    rooms.splice(mainIndex,1);
               this.setState({add_rooms:rooms},function(){
               console.log("add_rooms",this.state.add_rooms);
                line 0;
               });        
  
      },
  </code></pre>
  
  <p>line -0:  /*After deleting a room in del_click, the add_rooms shows the two rooms that should be present and ADD-Rooms Pop up is re-rendered but it displays the deleted room minus a other valid room */</p>