Can't re-render after update in React
<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>