I am trying to send data from one table in my database to another. In my frontend, I have a table that displays the details of the records/data of the table that I am trying to copy from. On each record, I have the approve button which when pressed, sends the row data of one record to the other table. I am getting an error in which all the records are being sent to the other database and it continues to loop.
Here is my frontend code:
import React, { useState, useEffect } from "react";
import axios from "axios";
import '../css/Approve_user.css';
function Approve_user() {
const [pendinguser, setPendinguser] = useState([])
useEffect(()=> {
axios.get('http://localhost:5500/getpendingdata')
.then(res=>setPendinguser(res.data))
.catch(err=>console.log(err))
}, [])
const handleApprove = (i) => {
axios.post('http://localhost:5500/approveduser', i)
.then(res => {
if(res.data.Status === 'Success'){
alert("User Approved Successfully!");
window.location.reload()
}
else{
alert(res.data.Error);
}
})
.catch(err => console.log(err));
}
return(
<section className="Approve_users">
<div className="Approve_title">
<h3>Approve New Users Section</h3>
<h5>Select and Decline Users</h5>
</div>
<div className="pendingusers">
<table>
<thead>
<tr>
<th>Ticket ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Gender</th>
<th>Location</th>
<th>Phone No.</th>
<th>Email</th>
<th>Category</th>
<th>Skill</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{
pendinguser.map((data, i) => (
<tr key={i}>
<td>{data.pending_user_ID}</td>
<td>{data.pending_user_firstname}</td>
<td>{data.pending_user_lastname}</td>
<td>{data.pending_user_username}</td>
<td>{data.pending_user_gender}</td>
<td>{data.pending_user_location}</td>
<td>{data.pending_user_phone_no}</td>
<td>{data.pending_user_email}</td>
<td>{data.pending_user_category}</td>
<td>{data.pending_user_skill}</td>
<td className="buttons">
<button className='Approve' onClick={handleApprove(i)}>Approve</button>
<button className='Delete'>Delete</button>
</td>
</tr>
))
}
</tbody>
</table>
</div>
</section>
)
}
export default Approve_user;
And here is my backend code:
app.post('/approveduser', (req, res) => {
const sql = "INSERT INTO users(`user_firstname`, `user_lastname`, `user_username`, `user_gender`, `user_location`, `user_phone_no`, `user_email`, `user_password`, `user_category`, `user_profilepic`, `user_skill`) SELECT `pending_user_firstname`, `pending_user_lastname`, `pending_user_username`, `pending_user_gender`, `pending_user_location`, `pending_user_phone_no`, `pending_user_email`, `pending_user_password`, `pending_user_category`, `pending_user_profilepic`, `pending_user_skill` FROM pending_users WHERE pending_user_ID=?";
const approve_ID = req.body.i;
db.query(sql, [approve_ID], (err, result) => {
if(err) return res.json({Error: err});
else return res.json({Status: "Success"});
})
})
Let’s say the table data is for records, So am expecting to have two submit buttons for each record. So when I press the approve button for record A, am expecting record A to be copied from the pending_users table to the users table and the same if I press the approve button for record B.
2
Answers
The reason your function is executing during rendering is because you are running the function during onClick instead of registering it. There are two ways in which you could overcome this issue.
Method 1
This passes your function to onClick binding instead of calling it. Onclick’s event will be passed to your function parameter in this case.
Opt for this method if you dont need any extra parameters passed to your function other than the onClick event.
Method 2
This type invokes an arrow function whenever onClick is triggered and your function is called inside that. This could be an option when you need additional parameters to be passed instead of the onClick event.
You would have to go with this method to manually pass the index to your function.
You need to update this piece of code, right now the function is triggered every time the page re-renders and not on the button click you wanted.
DO THIS INSTEAD