Way to display individual data from MySQL database on React.js? - mysql

Question

Is there a way that individual data from the MySQL database will be displayed on the react.js pages, like user profile?
This is my user profile but it display all the data on the database. How I can display single data? For example the information of the Student number 1. const getStudent is where the connection happen from the backend
Front end
import React from "react";
import { useState } from "react";
import Axios from "axios";
import { useNavigate } from "react-router-dom";
function Profile() {
const [studentList, setStudentList] = useState([]);
let navigate = useNavigate();
const getStudent = () => {
Axios.get("http://localhost:3001/students").then((response) => {
setStudentList(response.data);
});
};
return (
<div className="students">
<button onClick={getStudent}>Show Students</button>
<h3>
</h3>
{studentList.map((val, key) => {
return (
<div className="student">
<div>
<h3>Email: {val.email}</h3>
<h3>Password: {val.password}</h3>
<h3>Student Number: {val.student_num}</h3>
<h3>First Name: {val.first_name}</h3>
<h3>Middle Name: {val.middle_name}</h3>
<h3>Last Name: {val.last_name}</h3>
<h3>Year Level: {val.year_lvl}</h3>
<h3>Section: {val.section}</h3>
</div>
</div>
);
})}
</div>
);
}
export default Profile;
key is the name of the column
The connection of the mysql/ BackEnd
app.get("/students", (req, res) => {
db.query("SELECT * FROM student", (err, result) => {
if (err) {
console.log(err);
} else {
res.send(result);
}
});
});