How to refresh data of one component from another component in react js

Question

I'm new to react js and creating one sample application with and some basic CRUD operation.
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.

Here is my 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(            
              <button data={this.props.id} onClick={this.rowDelete} className="btn btn-danger">Delete</button>
         );
    },
});

var SudentList = React.createClass({
    render: function () {
        var RowData = this.props.data.map(function(item){
            return (
              <tr key={item.id}>
                 <td>{item.id}</td>
                 <td>{item.firstMidName}</td>
                 <td>{item.lastName}</td>
                 <td>{item.enrollmentDate}</td>
                 <td>Edit</td>
                 <td><DeleteRow data={item.id}/></td>
             </tr>
            );
          });

        return (
            <table className="table table-bordered table-responsive">
             <thead>
                <tr>
                 <th>Id</th>
                 <th>Fist Name</th>
                 <th>Last Name</th>
                 <th>Enrollment Date</th>
                 <th>Edit</th>
                 <th>Delete</th>
                </tr>
             </thead>
             <tbody>
                 {RowData}
             </tbody>
         </table>            
      );
    }
});

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 (
             <div>
           <button className="btn btn-primary pull-right" style={addBtnStyle}>Add New</button>               
           <SudentList data={this.state.items} />                                                                    
         </div>
    );
    }
});

ReactDOM.render(
  <Gird dataUrl='/Students/GetAllStudent' />,
  document.getElementById('content')
);

I want to refresh the data of Gird component from DeleteRow component on ajax success, how can I do that?. I've gone through few questions on this site, but not luck so far.

Answer 1

What you need to do is pass a function to the DeleteRow component from the Grid component, so that when the delete is successful, you will update the list of items in Grid. Try something like this

var DeleteRow = React.createClass({
    rowDelete: function (e) {
        console.log(this.props);
        var self = this;
        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
                    self.props.onRowDelete(self.props.data)
                },
                error: function (error) {

                }
            });
        }
    },
    render: function () {
        return(
              <button data={this.props.id} onClick={this.rowDelete} className="btn btn-danger">Delete</button>
         );
    },
});

var SudentList = React.createClass({
    render: function () {
        var self = this;
        var RowData = this.props.data.map(function(item){
            return (
              <tr key={item.id}>
                 <td>{item.id}</td>
                 <td>{item.firstMidName}</td>
                 <td>{item.lastName}</td>
                 <td>{item.enrollmentDate}</td>
                 <td>Edit</td>
                 <td><DeleteRow data={item.id} onRowDelete={self.props.onRowDelete}/></td>
             </tr>
            );
          });

        return (
            <table className="table table-bordered table-responsive">
             <thead>
                <tr>
                 <th>Id</th>
                 <th>Fist Name</th>
                 <th>Last Name</th>
                 <th>Enrollment Date</th>
                 <th>Edit</th>
                 <th>Delete</th>
                </tr>
             </thead>
             <tbody>
                 {RowData}
             </tbody>
         </table>
      );
    }
});

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();
    },
    onRowDelete: function(id) {
      var items = this.state.items.filter(function(item, i) {
        return item.id !== id;
      })
      this.setState({items: items})
    },
    render: function () {

        var addBtnStyle = {
            margin:'10px',
        }

        return (
             <div>
           <button className="btn btn-primary pull-right" style={addBtnStyle}>Add New</button>
           <SudentList data={this.state.items} onRowDelete={this.onRowDelete}/>
         </div>
    );
    }
});

This might be helpful as well