Remove a specific table row on onClick event in React component
<p>I'm new to React and struggling on how to manipulate the DOM after I have deleted a record. I have a few react components but the one I am focused on is to delete a record in a rails api I have set up. I have the record deleting ok on the Ajax onclick call, but don't know the best way to remove the specific row using React.</p>

<p>Table full of data</p>

<pre><code>var ContactAll = React.createClass({
  getInitialState: function() {
    return {
      contacts: [] 
    }
  },
  componentDidMount: function() {
    $.ajax({
      dataType: "json",
      url: '/all-contacts',
      type: "GET",
      context: this,
      success: function(data, status, xhr) {
        this.setState({ contacts: data });
      }
    });
  },
  render: function(){
    if(this.state.contacts == 0) {
      return (
        &lt;div&gt;Loading&lt;/div&gt;
      )
    } else {
      var contactComponents = this.state.contacts.map(function(contact, i) {
        var full_name = contact.first_name + ' ' + contact.last_name

        return  &lt;tr key={i} className="contact"&gt;
                  &lt;td&gt;{ full_name}&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;{ contact.email_address }&lt;/td&gt;
                  &lt;td&gt;{ contact.phone_number }&lt;/td&gt;
                  &lt;td&gt;{ contact.company_name }&lt;/td&gt;
                  &lt;td&gt;&lt;DeleteButton email={contact.email_address} /&gt;&lt;/td&gt;
                &lt;/tr&gt;;
      });
      return &lt;div&gt;
              &lt;table&gt;
                &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;th&gt;Contact Name&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;Email Address&lt;/th&gt;
                  &lt;th&gt;Phone Number&lt;/th&gt;
                  &lt;th&gt;Company Name&lt;/th&gt;
                &lt;/tr&gt;

                {contactComponents};

                &lt;/tbody&gt;
              &lt;/table&gt;
             &lt;/div&gt;
    }
  }
});
</code></pre>

<p>Delete Button within ContactAll component</p>

<pre><code>var DeleteButton = React.createClass({
  onClick: function() {
    var email = this.props.email;

    $.ajax({
      data: {email_address: email },
      url: '/delete-contact',
      dataType: 'html',
      type: "POST",
      success: function(data, status, xhr) {
        $('.delete-success').slideDown(400);
        setTimeout(function() { $(".delete-success").slideUp(400); }, 5000);
      }
    });
  },
  render: function(){
    return(
      &lt;button onClick={() =&gt; { this.onClick(this.props.email) }}&gt;Delete&lt;/button&gt;
    )
  }
});
</code></pre>

<p>What is the best way of removing the specific row that gets deleted when the delete button for the corresponding row is clicked?</p>

<p>Thanks!</p>