[Solved]-How to refresh data of one component from another component in react js-Reactjs

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