I created a component which consist of a list of employees. I want to be able to edit and delete each item separately. The delete is working as desired, but the update is not working. My database is Mysql.
This is my code
import axios from "axios";
import { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import Student from "./Student";
import { FaGetPocket } from "react-icons/fa";
import { FaHome } from "react-icons/fa";
import { FaAmazonPay } from "react-icons/fa";
import { FaPlus } from "react-icons/fa";
import { FaRegEdit } from "react-icons/fa";
import { FaTimes } from "react-icons/fa";
import "./DashboardList.css"; // Custom CSS file
//import { Pagination } from "./Pagination";
function Updatestudent () {
const [users, setUsers] = useState([]);
const [error, setError] = useState("");
const navigate = useNavigate(); // ✅ Fix: Call useNavigate()
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [age, setAge] = useState("");
const [id, setId] = useState("");
const [items, setItems] = useState([]);
const [selectedItem, setSelectedItem] = useState(null);
const [err, setErr] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(5);
const [data, setData] = useState({
name: "",
email: "",
age: "",
});
useEffect(() => {
axios
.get("http://localhost:8081/users")
.then((res) => {
console.log("✅ Unique Data fetched:", res.data);
setItems(res.data);
//setData(res.data);
})
.catch((err) => {
console.error("❌ Error fetching data:", err);
setError("Failed to load data. Please check server.");
});
}, []);
//const indexOfLastPost = currentPage * postsPerPage;
//const indexOfFirstPost = indexOfLastPost - postsPerPage;
//const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
const handleSelectItem = (itemId) => {
const item = items.find(i => i.id === itemId);
setSelectedItem(item);
setData(items);
};
//const handleChange = (e) => {
// setData({ ...items, [e.target.name]: e.target.value });
//};
const handleAdd= (event) => {
event.preventDefault();
axios
.post("http://localhost:8081/users", { name, email, age })
.then((res) => {
console.log("✅ Employee added successfully:", res);
navigate("/"); // ✅ Fix: Properly navigate after success
})
.catch((err) => console.error("❌ Error adding student:", err));
};
const handleChange = (e) => {
const { name, value } = e.target;
setData((prevData) => ({
...prevData,
[name]: value,
}));
};
const handleDelete = async (id) => {
try {
await axios.delete(`http://localhost:8081/student/${id}`);
navigate("/"); // Fix: Properly navigate after success
setUsers(users.filter((user) => user.id !== id)); // ✅ Optimized UI update without reloading
console.log("✅ Employee deleted successfully:", res);
} catch (err) {
console.error("❌ Error deleting student:", err);
}
};
const handleUpdate = async (id) => {
try {
await axios.put('http://localhost:8081/update/:id'+ id, items)
.then( (event) => {
console.log("Employee Updated successfully:", items);
navigate("/")}); // Fix: Properly navigate after success
} catch (err) {
console.log("Employee Updated successfully:", items);
}
};
const handleSubmit = (event) => {
event.preventDefault();
handleUpdate(id)
axios
.put('http://localhost:8081/update/:id'+ id, data )
.then((event) => {
console.log("Employee Updated successfully:", data);
navigate("/"); // Fix: Properly navigate after success
})
.catch((err) => console.error("Error Updating Employee:", err));
};
return (
<div className="dashboard-list w-100 vh-100 justify-content-between align-items-center p-4" >
<div className="container p-4 bg-white rounded shadow">
<h2 className="list-title">Employees List</h2>
<div className="mb-2 form-control">
<button className=" ms-2 btn btn-outline-primary">Add
<Link to="/create" >
<FaPlus className="ms-2 icon" color="" size="1.5rem"
></FaPlus>
</Link>
</button>
</div>
<ul id="list" className="list-container">
{items.map(item => (
<tr key={item.id} className="list-item" align-items-center="true">
<button className=" ms-3 btn btn-outline-success">Edit
<FaRegEdit className="ms-3 icon" color="green" onClick={() => {handleSelectItem(item.id)}}
size="1.5rem" ></FaRegEdit>
</button>
<button className=" ms-3 btn btn-outline-danger">Del.
<FaTimes className="ms-3 icon" color="red" onClick={() => {if (confirm("Do you want to delete this item?")) {handleDelete(item.id)};}}
size="1.5rem" ></FaTimes>
</button>
<td className=" ms-3 ">
{item.name}
</td>
<td className=" ms-3 ">
{item.email}
</td>
<td className=" ms-3 ">
{item.age}
</td>
</tr>
))}
</ul>
{selectedItem && (
<div className="d-flex justify-content-right align-items-center">
<div className="w-100 bg-white rounded p-3">
<h3>Details</h3>
<form >
<div>
<input className="mb-2 form-control"
type="text"
defaultValue={selectedItem.name}
onChange={handleChange}
/>
</div>
<div>
<input className="mb-2 form-control"
type="email"
defaultValue={selectedItem.email}
onChange={handleChange}
/>
</div>
<div>
<input className="mb-2 form-control"
type="number"
defaultValue={selectedItem.age}
onChange={handleChange}
/>
</div>
{/* Display other item properties */}
<p></p>
<button
className="btn btn-success"
onClick={(e) => handleUpdate(e,selectedItem.id)}>
Update
</button>
</form>
</div>
</div>
)}
<Link to="/" className="mb-2 form-control" >
<FaHome className="ms-2 icon" color="green" size="3rem"
></FaHome>
</Link>
</div>
</div>
)
}
export default Updatestudent;
When I click the Edit button, it display selected item with inputs to edit.
When I click the update, the record in the mysql database is suppose to be updated. below is the backend (server) code
const express = require("express");
const cors = require("cors");
const mysql = require("mysql");
const app = express();
app.use(cors());
app.use(express.json()); // Enable JSON parsing
// MySQL Connection
const db = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "crud",
});
db.connect((err) => {
if (err) {
console.error("Database connection failed:", err);
return;
}
console.log("Connected to MySQL database");
});
// ✅ Fetch all users
app.get("/users", (req, res) => {
const sql = "SELECT * FROM users";
db.query(sql, (err, data) => {
if (err) {
console.error("SQL Query Error:", err);
return res.status(500).json({ error: "Database query failed" });
}
return res.json(data);
});
});
//Fetch a single user
app.get("/user/:id", (req, res) => {
const { id } = req.params.id; // ✅ Extract id from URL
const sql = "SELECT * FROM users WHERE id = ?";
db.query(sql, id, (err, data) => {
if (err) {
console.error("SQL Query Error:", err);
return res.status(500).json({ error: "Database query failed" });
}
return res.json(data);
});
});
// ✅ Add a new user
app.post("/users", (req, res) => {
const sql = "INSERT INTO users (`Name`, `Email`, `Age`) VALUES (?, ?, ?)";
const values = [req.body.name, req.body.email, req.body.age];
db.query(sql, values, (err, data) => {
if (err) {
console.error("SQL Insert Error:", err);
return res.status(500).json({ error: "Database insertion failed" });
}
return res.json({ message: "User added successfully", id: data.insertId });
});
});
// ✅ Update an existing user
app.put("/update/:id", (req, res) => {
const { id } = req.params; // Extract id from URL
db.query("UPDATE 'users' SET 'name' = ?, 'email' = ?, 'age' = ? WHERE 'id' = ?", [name, email, age], (err) => {
const values = [req.body.name, req.body.email, req.body.age];
if (err) return res.status(500).send(err);
res.send('Record updated successfully');
});
});
// ✅ Delete an existing user
app.delete("/student/:id", (req, res) => {
const sql = "DELETE FROM users WHERE ID = ?";
const id = req.params.id;
db.query(sql, id, (err, data) => {
if (err) {
console.error("SQL Delete Error:", err);
return res.status(500).json({ error: "Database deletion failed" });
}
return res.json({ message: "User deleted successfully" });
});
});
// Fetch single record
app.get('/record/user/:id', (req, res) => {
const {id} = req.params;
db.query('SELECT * FROM users WHERE id = ?', [id], (err, result) => {
if (err) return res.status(500).send(err);
res.json(result[0]);
});
});
// Update record
app.put('/record/:id', (req, res) => {
const id = req.params.id;
const { name1, email, age } = req.body; // Example fields
db.query('UPDATE users SET name = ?, email = ?, age = ? WHERE id = ?', [name1, email, age], (err) => {
const values = [req.body.name, req.body.email, req.body.age];
if (err) return res.status(500).send(err);
res.send('Record updated successfully');
});
});
// ✅ Start the server
app.listen(8081, () => {
console.log("Server is running on port 8081");
});
