title: Remove a specific table row on onClick event in React component
body: <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>