How To Reload The Data Of A Child When A Child Component Is Being Rendered In Reactjs

I have a table component which loads the data from an API it looks like this var Tablefortask = React.createClass({ getInitialState: function() {

Solution 1:

When ever you change the employeeIdcomponentWillReceiveProps(nextProps) getting called.

componentWillReceiveProps: function(nextProps) {

    if (nextProps.empId !== this.props.empId) {
       this.loadCommentsFromServer(nextProps.empId);
    } 

},

loadCommentsFromServer: function(empId) {

  $.ajax({
     url: this.props.url + empId,
     dataType: 'json',
     cache: false,
     success: function(data) {
        this.setState({data: data});
     }.bind(this),
     error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
     }.bind(this)
  });

},
componentDidMount: function() {

    this.loadCommentsFromServer(this.props.empId);

},

Add the componentWillReceiveProps and pass the nextProps.empId with loadCommentsFromServer.

Solution 2:

Each time your Table component is re-render, componentWillReceiveProps(nextProps) is called (instead of componentDidMount called only once at component first display). Try adding in your component:

componentWillReceiveProps: function(nextProps) {
    this.loadCommentsFromServer();
},