title: React: Need to call parent to re-render component
body: <p>I create a table with rows and sub-rows . When i delete a sub-row i need to re-render the whole component.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import auth from './auth'
  
  export class FormList extends React.Component{
  
    constructor(props) {
      super(props);
      auth.onChange = this.updateAuth.bind(this)
      this.state = {results: []};
    }
  
    componentWillMount() {
      auth.login();
    }
  
    // call to get the whole list of forms for react to re-render.
    getForms() {
      if(this.state.loggedIn) {
        $.get(call server url, function(result) {
          this.setState({
               results: result.data.forms
          });
        }.bind(this));
      }
    }
  
    updateAuth(loggedIn) {
      this.setState({
       loggedIn: loggedIn
      });
      this.getForms()
    }
  
    componentDidMount() {
      this.getForms()
    }
  
    render() {
      return (
      &lt;FormTable results={this.state.results} /&gt; 
      )
   }
  };
  
  class FormTable extends React.Component{
  
    render() {
      return ( 
        &lt;table className="forms"&gt;
         &lt;thead&gt;
           &lt;tr&gt;
              &lt;th&gt;Form Name&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th style={{width: "40px"}}&gt;&lt;/th&gt;
           &lt;/tr&gt;
         &lt;/thead&gt;
         {this.props.results.map(function(result) {
              return &lt;FormItem key={result.Id} data={result} /&gt;;
          })}         
        &lt;/table&gt;
      )
    }
  };
  
  class FormItem extends React.Component{
    render() {
      return (
        &lt;tbody&gt;
          &lt;tr className="form_row"&gt;
            &lt;td&gt;{this.props.data.Name}&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          {this.props.data.map(function(result) {
              return &lt;FormTransaction key={result.Id} data={result} /&gt;;
          })} 
        &lt;/tbody&gt;
      )
    }
  };
  
  class FormTransaction extends React.Component{
  
    render() { 
      return (
        &lt;tr className="subform_row"&gt;
            &lt;td&gt;{this.props.data.date}&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td data-enhance="false"&gt;
            &lt;DeleteTransaction data={this.props.data.Id} /&gt;
        &lt;/tr&gt;
      )
    }
  };
  
  class DeleteTransaction extends React.Component {
    constructor(props) {
      super(props);
      this.state = {Id:props.data};
      this.handleDelete = this.handleDelete.bind(this);
     }
  
     // deletes a sub row and calls get forms to re-render the whole react.
     handleDelete(event) {
       $.ajax({
        url: server url + this.state.Id,
        type: 'DELETE',
        data: {},
        dataType: 'json',
        success: function(result, status) {
            console.log(this);
            // need to call get forms here
        },
        error: function(jqXHR, status, error) {
            console.log(jqXHR);
        }
       });*/
    }
  
    render() {
      return(
        &lt;i className="danger" onClick = {this.handleDelete}&gt;X&lt;/i&gt;
      )
    }
  };
  
  ReactDOM.render(
    (&lt;FormList/&gt;),
    document.getElementById('react-forms')
  );
  </code></pre>
  
  <p>So i need to call the getforms method after delete is successful from handledelete method. </p>
  
  <p>I am pretty new to react as well as using es6 . I tried extending deletetransaction to formslist and call super.getForms . But that didnt work either.
  Any help is appreciated..</p>