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

Viewed 597

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);
        }
      });
      
    });
0 Answers
Related