How to do edit ajax in reactjs

I was wondering if edit works like add but it doesn't. Im using fetch method Im not familiar on react's ajax so I am not clearly sure whats wrong with my code.. I tried editing it and it works when it refresh so my proplem is it automatically reloads

so here is my code onclick update

handleUpdate(id, name, address,department){ 
debugger
    const data = {
      'Employee_ID': id,
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
    return fetch('http://localhost:5118/api/employeedetails/PutEmployeeDetail/'+id, {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
      body: JSON.stringify(data)
     })
    .then(function(response) {
      console.log(response)
      return response.json();
    })
    .then((result)=> {
        var jsonReturnedValue = [...this.state.jsonReturnedValue]; 
        var idx = jsonReturnedValue.findIndex((val) => val.Employee_ID == id)
        jsonReturnedValue[idx].Department = department,
        jsonReturnedValue[idx].Employee_name = name,
        jsonReturnedValue[idx].Address = address
        this.setState({jsonReturnedValue})
    })
    .catch(function(error) {
      console.log(error);

    })

this is the code for the table

< 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>

code for the calling of the data where the button located

renderItem(d, i) {
  return <tr key={i} >
    <td> {d.Employee_ID} </td>
    <td>{d.Employee_Name}</td>
    <td>{d.Address }</td> 
    <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this,  d.Employee_ID, d.Employee_Name, d.Address , d.Department)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
    <td><center><input type="submit" className ="btn btn-danger" onClick={this.deleteEmployee.bind(this,  d.Employee_ID , i)}  value="Delete"/></center></td>
 </tr>
}

here is my code for the modal

   {/*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">Update New Employee</h4>
                </div>
                 <form>

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

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

                </form>
            </div>
          </div>
        </div>

PS: the code itself is working so the console says nothing is wrong but i want it when i click it the table reloads