I was wondering if delete 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
so here is my code onclick delete
deleteEmployee(id) {
jQuery.support.cors = true;
fetch('http://localhost:5118/api/employeedetails/DeleteEmployeeDetail/'+ id, {
method: 'GET'
}).then(function(response) {
// history.go(0);
var jsonReturnedValue = [...this.state.jsonReturnedValue];
this.setState({jsonReturnedValue})
}).catch(function(err) {
// 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)} value="Delete"/></center></td>
</tr>
}
PS: the code itself is working so the console says nothing is wrong but i want it when i click it the table reloads
Step 1 - You need to call index in your functiondeleteEmployee(id,index)
Step 2 - Call Splice method after request end
deleteEmployee(id, index) {
jQuery.support.cors = true;
fetch('http://localhost:5118/api/employeedetails/DeleteEmployeeDetail/'+ id, {
method: 'GET'
}).then(function(response) {
// history.go(0);
var jsonReturnedValue = [...this.state.jsonReturnedValue];
this.setState({jsonReturnedValue})
}).catch(function(err) {
// Error :(
});
**this.state.jsonReturnedValue.splice(index, 1)**
///You can call as empty
this.setState({})
}
EDIT/////
Also, the render shouldnt call as a function. You can use like that
{jsonReturnedValue.map((d,i) => <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)} value="Delete"/></center></td>
</tr>)}
And then
onClick={this.deleteEmployee.(d.Employee_ID, i)}
you can call bind in constructor
constructor(props) {
super(props)
this.state = {
example: ""
}
this.deleteEmployee = this.deleteEmployee.bind(this)
}
It looks like you're storing your list of employees in this.state.jsonReturnedValue
. In your deleteEmployee
function you make a copy of the array, but don't change any of the values. Presumably, you want to remove the row for the employee that was deleted before calling this.setState
with the updated array.
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
I was looking up a program online and this entire function really stumped me
I am currently making a application to track an items expiry dateI am using firebase to store data about the item such as, name, amount, date until expired
My current spreadsheet has 1 frozen row as the headerI am trying to figure out how to adjust, slice, move, etc by 1
I am looking for a function to convert date in one timezone to another