title: How to reloads the table when clicked using AJAX in reactjs Put Method
body: <p>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. Im trying do an AJAX but i dont know what to put where to put it... it is way different than php..</p>
  
  <p>my code for the onclick</p>
  
  <pre><code>handleUpdate(id, name, address,department){ 
  
  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)=&gt; {
    var jsonReturnedValue = [...this.state.jsonReturnedValue]; 
  
    jsonReturnedValue[data].Department = department,
    jsonReturnedValue[data].Employee_name = name,
    jsonReturnedValue[data].Address = address
    this.setState({jsonReturnedValue})
  })
  .catch(function(error) {
    console.log(error);
  
  })
  </code></pre>
  
  <p>}</p>
  
  <p>code for the render and the table</p>
  
  <pre><code>render() {
       const isEnabled = this.canBeSubmitted();
      let {jsonReturnedValue} = this.state;
    return(
      &lt;div&gt;
          &lt;div className="container"&gt;   
            &lt;h1&gt; Listof Employees &lt;/h1&gt;
              &lt;button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"&gt; Add an Employee&lt;/button&gt;
               &lt;table className= "table table-bordered" id="result"&gt; 
                  &lt;tbody&gt;
                   &lt;tr&gt;
                        &lt;th&gt;ID&lt;/th&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                        &lt;th&gt;Address&lt;/th&gt;
                        &lt;th&gt;Update&lt;/th&gt;
                        &lt;th&gt;Delete&lt;/th&gt;
                   &lt;/tr&gt;
                      {jsonReturnedValue.map((d,i) =&gt; this.renderItem(d,i))}
                  &lt;/tbody&gt;
  
              &lt;/table&gt;
            &lt;/div&gt;
  
        {/*Updating*/}
  
      &lt;div className="modal fade" id="UpdateEmployee" role="dialog"&gt;
             &lt;div className="modal-dialog"&gt;
               &lt;div className="modal-content"&gt;
                  &lt;div className="modal-header"&gt;
                     &lt;button type="button" className="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                    &lt;h4 className="modal-title"&gt;Update Employee&lt;/h4&gt;
              &lt;/div&gt;
              &lt;form &gt; 
                &lt;div className="container"&gt; 
                &lt;div className="modal-body"&gt; 
                &lt;table&gt; 
                &lt;tbody&gt; 
                &lt;tr&gt; 
                &lt;td&gt;Name&lt;/td&gt; 
                &lt;td&gt; 
                &lt;input  type="text" 
                        name="Employee_Name"
                        value={this.state.Employee_Name} 
                        required
                        onChange={(e) =&gt; this.handleChange(e, "Employee_Name")}/&gt; 
                &lt;/td&gt; 
                &lt;/tr&gt; 
                &lt;tr&gt; 
                &lt;td&gt;Address&lt;/td&gt; 
                &lt;td&gt; 
                &lt;input  type="text" 
                        name="Address" 
                        value={this.state.Address} 
                        required
                        onChange={(e) =&gt; this.handleChange(e, "Address")}/&gt; 
                &lt;/td&gt; 
                &lt;/tr&gt; 
                &lt;tr&gt; 
                &lt;td&gt;Department&lt;/td&gt; 
                &lt;td&gt; 
                &lt;input  type="text" 
                        name='Department' 
                        value={this.state.Department} 
                        required
                        onChange={(e) =&gt; this.handleChange(e, "Department")}/&gt; 
  
                &lt;/td&gt; 
                &lt;/tr&gt; 
                &lt;/tbody&gt; 
                &lt;/table&gt; 
                &lt;/div&gt; 
                &lt;/div&gt; 
                &lt;div className="modal-footer"&gt; 
                &lt;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"/&gt; 
                &lt;button type="button" className="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt; 
                &lt;/div&gt; 
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>