title: Can't re-render after update in React
body: <p>I have a simple database in React where updates and deletions to the database are handled via Ajax. </p>
  
  <p>After the successful Ajax call on the record component, the updated or deleted record is passed to the records component, which displays all of the records. </p>
  
  <p>There, the handle methods below update the state of the records and re-render the results.</p>
  
  <p>My issue is that while the handleDelete method works fine (and re-renders the records without the deleted record), the handleUpdate method does not and leaves the un-updated record until I refresh the page. </p>
  
  <p>Any ideas why the setState in the handleUpdate wouldn't re-render the results?</p>
  
  <p>Below is the code:</p>
  
  <pre><code>  class Sites extends React.Component {
     constructor (props) {
      super(props);
      this.handleUpdate = this.handleUpdate.bind(this);
      this.handleDelete = this.handleDelete.bind(this);
      this.state = {records: this.props.records};
     }
     handleUpdate (record) {
      let records = this.state.records;
      let index = records.map((x) =&gt; {return x.id}).indexOf(record.id);
      records.splice(index, 1, record);
      this.setState({records: records}); # this doesn't re-render the results
     }
     handleDelete (record) {
      let records = this.state.records;
      let index = records.map((x) =&gt; {return x.id}).indexOf(record.id);
      records.splice(index, 1);
      this.setState({records: records}); # this re-renders the results
     }
     render () {
      let records = this.state.records.map((record) =&gt; {
        return (
            &lt;Record record={record} key={record.id} handleUpdateRecord={this.handleUpdate} handleDeleteRecord={this.handleDelete}/&gt;
          );
      });
      return (
          &lt;div className="col-sm-9"&gt;
            &lt;table className="table table-striped"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;City&lt;/th&gt;
                  &lt;th&gt;State&lt;/th&gt;
                  &lt;th&gt;Actions&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {records}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
      );
     }
    }
  </code></pre>