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.

classTestextendsReact.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
    }
    returnfetch('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><divclassName="container"><divclassName="modal-body"><table><tbody><tr><td>Name</td><td><inputtype="text"ref="Employee_Name"onChange={(e) => this.handleChange(e, "Employee_Name")}
                required
                /> 
          </td></tr><tr><td>Address</td><td><inputtype="text"ref="Address"onChange={(e) => this.handleChange(e, "Address")}
                required
                 />
          </td></tr><tr><td>Department</td><td><inputtype="text"onChange={(e) => this.handleChange(e, "Department")}
                  required
          /> 
          </td></tr></tbody></table></div></div><divclassName="modal-footer"><inputtype="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"/><buttontype="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
        <TableComponentdata={this.state.data} /></div>
    );
  }
}

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

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