title: How to refresh data of one component from another component in react js
body: <p>I'm new to react js and creating one sample application with  and some basic CRUD operation.<br>
  I'm able to display a list, but I don't have any idea if I delete any record then how to refresh data grid.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var DeleteRow = React.createClass({
      rowDelete: function (e) {
          console.log(this.props);
          var isConfirm = confirm("Are you sure want to delete this record?")
          if (isConfirm) {
              $.ajax({
                  type: 'POST',
                  url: 'Students/DeleteStudent',
                  data: { id: this.props.data },
                  success: function (data) {
                      // refresh the list data
                  },
                  error: function (error) {
  
                  }
              });
          }
      },
      render: function () {
          return(            
                &lt;button data={this.props.id} onClick={this.rowDelete} className="btn btn-danger"&gt;Delete&lt;/button&gt;
           );
      },
  });
  
  var SudentList = React.createClass({
      render: function () {
          var RowData = this.props.data.map(function(item){
              return (
                &lt;tr key={item.id}&gt;
                   &lt;td&gt;{item.id}&lt;/td&gt;
                   &lt;td&gt;{item.firstMidName}&lt;/td&gt;
                   &lt;td&gt;{item.lastName}&lt;/td&gt;
                   &lt;td&gt;{item.enrollmentDate}&lt;/td&gt;
                   &lt;td&gt;Edit&lt;/td&gt;
                   &lt;td&gt;&lt;DeleteRow data={item.id}/&gt;&lt;/td&gt;
               &lt;/tr&gt;
              );
            });
  
          return (
              &lt;table className="table table-bordered table-responsive"&gt;
               &lt;thead&gt;
                  &lt;tr&gt;
                   &lt;th&gt;Id&lt;/th&gt;
                   &lt;th&gt;Fist Name&lt;/th&gt;
                   &lt;th&gt;Last Name&lt;/th&gt;
                   &lt;th&gt;Enrollment Date&lt;/th&gt;
                   &lt;th&gt;Edit&lt;/th&gt;
                   &lt;th&gt;Delete&lt;/th&gt;
                  &lt;/tr&gt;
               &lt;/thead&gt;
               &lt;tbody&gt;
                   {RowData}
               &lt;/tbody&gt;
           &lt;/table&gt;            
        );
      }
  });
  
  var Gird = React.createClass({
      loadStudentsFromServer: function () {
          $.get(this.props.dataUrl, function (data) {
              if (this.isMounted()) {
                  this.setState({
                      items: data
                  });
              }
          }.bind(this));
      },
      getInitialState: function () {
          return { items: [] };
      },
      componentDidMount: function () {
          this.loadStudentsFromServer();
      },
      render: function () {
  
          var addBtnStyle = {
              margin:'10px',           
          }
  
          return (
               &lt;div&gt;
             &lt;button className="btn btn-primary pull-right" style={addBtnStyle}&gt;Add New&lt;/button&gt;               
             &lt;SudentList data={this.state.items} /&gt;                                                                    
           &lt;/div&gt;
      );
      }
  });
  
  ReactDOM.render(
    &lt;Gird dataUrl='/Students/GetAllStudent' /&gt;,
    document.getElementById('content')
  );
  </code></pre>
  
  <p>I want to refresh the data of <code>Gird</code> component from <code>DeleteRow</code> component on ajax success, how can I do that?.
  I've gone through few questions on this site, but not luck so far.</p>