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.

what does the data in the success function of the `DeleteRow` contain? is it the list without the deleted row? or is it a message? or is it the deleted row id? — Mamdouh Alsarayreh, Jul 20 '17 at 10:56
@MamdohSaraireh: It just a flag for testing, is record deleted or not! Nope it's not a list with updated data. — Hina Khuman, Jul 20 '17 at 11:00
Use an anchor tag bound to each item with a callback in the ajax delete request that resets the state of the items. — fungusanthrax, Jul 20 '17 at 19:11
@HinaKhuman: I'm stuck with this same problem but in my case, I have a component 'A' and another Component 'B'(different file). So when I perform a post operation in A then B needs to refresh or update(say table needs to update). How to implement this? — Akhil Suseelan, Aug 19 '20 at 06:37

Mamdouh Alsarayreh · Accepted Answer · 2017-07-20T11:25:20.997

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

Hey, thanks, but facing an issue on this line `onRowDelete={this.props.onRowDelete}` it says `Cannot read property 'onRowDelete' of undefined` — Hina Khuman, Jul 20 '17 at 11:17
Oh, that is because `this` is not defined in that scope, I have updated the answer to define `self` as `this` in the correct scope and use it later. — Mamdouh Alsarayreh, Jul 20 '17 at 11:19
Did you put it as `{self.props.onRowDelete}`? Just make sure you have updated all of them — Mamdouh Alsarayreh, Jul 20 '17 at 11:26
And the issue is at very first load, I'm not able to get list of students. — Hina Khuman, Jul 20 '17 at 11:29
Opps, seems my mistake, sorry i forgot to add self at one place. — Hina Khuman, Jul 20 '17 at 11:35
Oh dude, I've been checking the code for like 10 mins trying to figure it out. Glad it worked — Mamdouh Alsarayreh, Jul 20 '17 at 11:36
I have one more query, Is it good way to go? and if I want to create some big application then I have to use `npm` and other stuff? — Hina Khuman, Jul 20 '17 at 11:49

Rizal Sidik · Answer 2 · 2017-07-20T12:14:47.653

i have one solution of your code, you can passing function loadStudentsFromServer() to component DeleteRow same like you passing this.state.items to component SudentList

you can change your code, the first one is here :

<SudentList data={this.state.items} loadStudentsFromServer={this.loadStudentsFromServer}/>

and then in your SudentList component you can add this function :

loadStudentsFromServer: function(){
        this.props.loadStudentsFromServer()
    }.bind(this),

and also change this one to passing your function to DeleteRow component :

<DeleteRow data={item.id} loadStudentsFromServer={this.props.loadStudentsFromServer} />

and just call the function if you success delete the data :

success: function (data) {
  // refresh the list data
  this.props.loadStudentsFromServer()
},

and this is the full 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
                    this.props.loadStudentsFromServer()
                },
                error: function (error) {

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

var SudentList = React.createClass({
    loadStudentsFromServer: function(){
        this.props.loadStudentsFromServer()
    }.bind(this),
    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} loadStudentsFromServer={this.props.loadStudentsFromServer} /></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} loadStudentsFromServer={this.loadStudentsFromServer}/>                                                                    
         </div>
    );
    }
});

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

Hope it can help you, you can comment if have another error, thanks :)

Note : this code is re fetching your data from server after delete some data

Getting error `Cannot read property 'loadStudentsFromServer' of undefined` — Hina Khuman, Jul 20 '17 at 11:47
can you change this one please ? `loadStudentsFromServer: function(){ this.props.loadStudentsFromServer() }.bind(this),` — Rizal Sidik, Jul 20 '17 at 11:56
Getting same same error at ajax success `success: function success(data) { // refresh the list data this.props.loadStudentsFromServer(); }` — Hina Khuman, Jul 20 '17 at 12:00
if you have same error, maybe you can bind the first loadloadStudentsFromServer function too, hope can solve :) — Rizal Sidik, Jul 20 '17 at 12:08

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

2 Answers2