How to reload the table when clicked using AJAX in reactjs

Question

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, if I was going to use forceUpdate, based on research you should avoid using it. I'm trying do an AJAX but I don't know what to put where to put it; it is way different than PHP.

My code for the onclick:

 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) {
      history.go(0);
    })
    .catch(function(error) {
      console.log(error);

    })
}

this is the code for the onclick button plus the table itself

render() {
     const isEnabled = this.canBeSubmitted();
    let {jsonReturnedValue} = this.state;
  return(
    <div>
        <div className="container">   
          <h1> Listof Employees </h1>
            <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
             <table className= "table table-bordered" id="result"> 
                <tbody>
                 <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Address</th>
                      <th>Update</th>
                      <th>Delete</th>
                 </tr>
                    {jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
                </tbody>
            </table>
          </div>

      {/*Updating*/}

    <div className="modal fade" id="UpdateEmployee" role="dialog">
           <div className="modal-dialog">
             <div className="modal-content">
                <div className="modal-header">
                   <button type="button" className="close" data-dismiss="modal">&times;</button>
                  <h4 className="modal-title">ADD  Employee</h4>
            </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>

PS: IT IS ALSO IN THE SAME PAGE.. the reason I don't know how will I call it

Answer 1

Since you are contructing the table based on state jsonReturnedValue, you need not do anything extra apart from apending the newly added value to this state since, React will Automatically take care of updating only the change

Change the handleSubmit function to

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((result)=> {
       var jsonReturnedValue = [...this.state.jsonReturnedValue];
       jsonReturnedValue.push(laman);
       this.setState({jsonReturnedValue})
    })
    .catch(function(error) {
      console.log(error);

    })
}