Re-Render React Component After AJAX Request
<p>I'm building a CRUD application with React and I wondered if you could help on this issue.</p>

<p>I am making a AJAX GET request with<code>componentDidMount</code> to the server which retrieves the data and then sets the state in the success function. In the render function I then map over the <code>state</code> array and render each state into a <code>&lt;li&gt;</code> element and include a <code>&lt;button&gt;</code> element.</p>

<p>When the <code>&lt;button&gt;</code> element is clicked it calls the <code>delete()</code> function. This then calls the AJAX DELETE request on the ID. </p>

<p>My problem is how do I get the component to re-render or update the state after the AJAX request is a success?</p>

<pre><code>import React from 'react';

class PostList extends React.Component {
  constructor() {
    super();
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    $.ajax({
       url: '/posts',
       type: "GET",
       dataType: 'json',
       cache: false,
       success: function(data) {
         this.setState({posts: data})
       }.bind(this)
    });
  }

  delete(event) {
    let postId = event.target.parentNode.getAttribute("data-id");
      $.ajax({
         url: '/posts/' + postId,
         type: "DELETE",
         success: function(data) {
          console.log(data);
         }.bind(this)
      });
  }

  render() {
    let posts = this.state.posts.map( (index) =&gt; {
      return &lt;li data-id={index._id} className="list-group-item"&gt;&lt;a href={"posts/" + index._id}&gt;{index.title}&lt;/a&gt;&lt;button className="btn btn-default" onClick={this.delete.bind(this)}&gt;Delete&lt;/button&gt;&lt;/li&gt;
    })
    return (
      &lt;ul className="list-group"&gt;
        {posts}
      &lt;/ul&gt;
    )
  }
}

export default PostList;
</code></pre>