How To Reloads The Table When Clicked Reactjs

I was wondering how will I reload only the table, not the whole page on reacts. I've tried using history.go(0); however, it reloads the whole page please check how can I reload it,

Solution 1:

In your ajax call, after your call is successful get the response and call setState with new response received.

Now react will re-render and your component will be updated with new data from ajax call.

There is no need to call history.go(0).

I have assumed that there is a TableComponent which renders the table structure. TableComponent receives data as prop from Test component.

As soon as new data available via ajax call, that data is passed to TableComponent and TableComponent re-renders itself.

Whole page re-rendering will not occur in this case only changes occur where states were changed.

Check the below code snippet as an example.

class Test extends React.Component {

   constructor(){
     super();
     this.state = {
        data:[]
     };
   }
   
   handleChange = (event, name) => {
    // set state here
   }
  
 handleSubmit( name, address,department) {

 const laman = {
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
    return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(laman)
    })
    .then(function(response) {
      console.log(response)
      return response.json();
    })
    .then(function (result) {
      this.setState({data:result}); // <--------
      // as soon as you will call setState rerender will occur
  
    })
    .catch(function(error) {
      console.log(error);

    })
}

  render() {
    return ( 
    <div>
           <form>
<div className="container">
      <div className="modal-body">
          <table> 
          <tbody>
          <tr>
          <td>Name</td>
          <td>
          <input type="text"
                ref="Employee_Name"
                onChange={(e) => this.handleChange(e, "Employee_Name")}
                required
                /> 
          </td>
          </tr>
          <tr>
          <td>Address</td>
          <td>
           <input type="text"
                 ref="Address"
                onChange={(e) => this.handleChange(e, "Address")}
                required
                 />
          </td>
          </tr>
          <tr>
          <td>Department</td>
          <td>
           <input type="text"

                  onChange={(e) => this.handleChange(e, "Department")}
                  required
          /> 
          </td>
          </tr>
          </tbody>
          </table>

      </div>
      </div>
      <div className="modal-footer">
        <input type="button" className="btn btn-info" disabled={!isEnabled} 
           onClick = { this.handleSubmit.bind(
                            this, this.state.Employee_Name,
                            this.state.Address,
                            this.state.Department)
                      }
            value =" Add Employee"
            data-dismiss="modal"/>
        <button type="button" className="btn btn-default" data-dismiss="modal" >Close</button>
      </div>

        </form>
        
       // your table component or jsx goes here

        // render your table based on state -- data
        <TableComponent data={this.state.data} />
    </div>
    );
  }
}

ReactDOM.render( <Test /> ,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>