How to display user info after submitting the form to sql database in react js?

Question

Hello all i am working on a project where i am able to register and login after the these two steps user have to fill one more form i.e. display below and then after submitting these form data is going to database but when i click on show on the next page it is displaying all the records. I want the records of current user filled in but it is showing all the records from sql database. Main.js

import { useState } from 'react'
import axios from 'axios';
import {useHistory} from 'react-router-dom';
import { useEffect } from 'react';
const Main = () => {
  const [formStep, setFormStep] = useState(0);
  const history=useHistory();

   
    const [firstname,setfirstname]=useState('');
    const [lastname,setlastname]=useState('');
    const [email,setemail]=useState('');
    const [mobile,setmobile]=useState('');
    const [address,setaddress]=useState('');
    const [city,setcity]=useState('');
    const [pincode,setpincode]=useState('');
    const [conference,setconference]=useState('');
    const [seminar,setseminar]=useState('');
    const [paper,setpaper]=useState('');
    const [loginstatus,setlogin]=useState('');

  const completeFormStep = () => {
    setFormStep(step => step + 1)
  }
  const backFormStep = () => {
    setFormStep(step => step - 1)
  }
  
  const handlesubmit = () => {
    axios.post("http://localhost:3001/add",{
            firstname:firstname,
            lastname:lastname,
            email:email,
            mobile:mobile,
            address:address,
            city:city,
            pincode:pincode,
            conference:conference,
            seminar:seminar,
            paper:paper

           

        }).then((res)=>{
            console.log("success");


            
           
           
            
        })
        

        history.push("/view")

        
  };
  useEffect(() => {
    axios.get("http://localhost:3001/login").then((res)=>{
        console.log(res)
        if(res.data.loggedIn===true){
        setlogin(res.data.user[0].email)
        }
    })
}, []);

  
  return (
    <div className="create">
      <form method="POST">
        {formStep === 0 && (
          <section>
            <h1>{"Welcome" + loginstatus}</h1>
            <h2>Names</h2>

            <label>First Name</label>
            <input
              type="text"
              required
              onChange={(e)=>{
                setfirstname(e.target.value);
            }}
              

            />


            <br />

            <label>Last Name</label>
            <input
              type="text"
              required
              onChange={(e)=>{
                setlastname(e.target.value);
            }}

            />

            <br />
            <button type="button" onClick={completeFormStep}>Next</button>
          </section>)}

        <div className="step2">
          {formStep === 1 && (
            <section>
              <h2>Contact</h2>

              <label>Email ID</label>
              <input
                type="email"
                required
                onChange={(e)=>{
                  setemail(e.target.value);
              }}

              />
              <br />

              <label>Mobile No.</label>
              <input
                type="text"
                required
                onChange={(e)=>{
                  setmobile(e.target.value);
              }}

              />
              <br />
              <button type="button" onClick={backFormStep}>Back</button>
              <button type="button" onClick={completeFormStep}>Next</button>
            </section>)}
        </div>

        <div className="step3">
          {formStep === 2 && (
            <section>
              <h2>Address</h2>
              <label>Address</label>
              <textarea onChange={(e)=>{
                setaddress(e.target.value);
            }}>

              </textarea>
              <br />

              <label>City</label>
              <input
                type="text"
                required
                onChange={(e)=>{
                  setcity(e.target.value);
              }}
              />
              <br />
              <label>Pincode</label>
              <input
                type="text"
                required
                onChange={(e)=>{
                  setpincode(e.target.value);
              }}

              />
              <br />
              <button type="button" onClick={backFormStep}>Back</button>
              <button type="button" onClick={completeFormStep}>Next</button>

            </section>)}
        </div>
        <div className="step4">
          {formStep === 3 && (
            <section>
              <h2>Conferences attended,seminar and paper presented</h2>

              <label>Conferences name</label>
              <textarea placeholder="conferences names" onChange={(e)=>{
                setconference(e.target.value);
            }}></textarea>

              <br />
              <label>Seminar attended</label>
              <textarea placeholder="seminar names"onChange={(e)=>{
                setseminar(e.target.value);
            }}></textarea>

              <br />
              <label>Paper presented</label>
              <textarea placeholder="paper names" onChange={(e)=>{
                setpaper(e.target.value);
            }}></textarea>
              <br />
              <button type="button" onClick={backFormStep}>Back</button>
              <button type="submit" onClick={handlesubmit}>Submit</button>
             
            </section>)}
          <div>


          
          </div>
         

        </div>




      </form>










    </div>
  );
}

export default Main

Below the code where i want the details of current user by clicking on show

import React from 'react';
import axios from 'axios';
import { useState } from 'react';
//import { Link } from 'react-router-dom';
 export const View = () => {
    const [teacherList, setteacherList] = useState([]); 
    const showdata = () => {
      axios.get("http://localhost:3001/teachersdata").then((response) => {
        console.log(response)
        setteacherList(response.data);
      });
    };
     return(
        <div>
             {/* <Link to="/teacherdata/:emailId"  onClick={showdata}>Show</Link>  */}
              <button type="submit" onClick={showdata}>Show</button>  
            {teacherList.map((val,key)=>{
                return <div className='teacher'>
                <h3>Name: {val.firstname}</h3>
                <h3>Lastname: {val.lastname}</h3>
                <h3>Email: {val.email}</h3>
                <h3>Mobile: {val.mobile}</h3>
                <h3>Address: {val.address}</h3>
                <h3>City: {val.city}</h3>
                <h3>Pincode: {val.pincode}</h3>
                <h3>Conference: {val.conference}</h3>
                <h3>Seminar: {val.seminar}</h3>
                <h3>Paper Presented: {val.paper}</h3>
                </div>
            })}
            <button>Download PDF</button>
        </div>
     ) 
    
 }

This is my server side code i have use nodejs express js

onst express = require("express");
const app = express();
const cors = require('cors');
const mysql = require("mysql");
const cookie=require("cookie-parser");
const session=require("express-session");
const bodyparser=require("body-parser");
//const sessionteacher = require('express-mysql-session')(session);
app.use(cors({
    origin:("http://localhost:3000"),
    methods:("GET","POST"),
    credentials:true
}));
app.use(cookie());
app.use(bodyparser.urlencoded({extended:true}));
app.use(session({
    //teacher:sessionteacher,
    key:"userid",
    resave:false,
    saveUninitialized:false,
    secret:"userinfo",
    cookie:{
        expires:60*60*24,
    },
}))

app.use(express.json());
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'typroject'
});
db.connect((err) => {
    if (err) {
        throw err;
    }
    else {
        console.log("Mysql Connected");
    }
})
app.post('/register', (req, res) => {
    const email = req.body.email;
    const password = req.body.password;
    const cpassword = req.body.cpassword;
    db.query("SELECT  FROM registration WHERE email='"+email+"';", [email], (err, result) => {
        if(result){
            res.send({message:"User already exists"})
        }
        else{
            db.query("INSERT INTO registration (email,password,cpassword) VALUES(?,?,?)", [email, password, cpassword], (err, result) => {
               if(err){
                   res.send(err);
               }
               else{
                   res.send({message:"Registered Successful"})
               }
            })
        }
    })

    
})
app.post("/login", (req, res) => {
    const email = req.body.email;
    const password = req.body.password;
    db.query("SELECT * FROM registration WHERE  email='"+email+"' AND password='"+password+"';", [email,password], (err, result) => {
        if(err){
            res.send({err:err});

        }
        if(result.length>0){
            req.session.user=result;
            console.log( req.session.user)
            res.send(result);
        }
        else{
            res.send({message:"Wrong username/passsword"})
        }
    })
    app.get("/login",(req,res)=>{
        if(req.session.user){
            res.send({loggedIn:true,user:req.session.user})
        }
        else{
            res.send({loggedIn:false});
        }
    })
    app.post('/add', (req, res) => {
        const firstname=req.body.firstname;
        const lastname=req.body.lastname;
        const email=req.body.email;
        const mobile=req.body.mobile;
        const address=req.body.address;
        const city=req.body.city;
        const pincode=req.body.pincode;
        const conference=req.body.conference;
        const seminar=req.body.seminar;
        const paper=req.body.paper;

        if(firstname==""||lastname==""||email==""||mobile==""||address==""||city==""||pincode==""||conference==""||seminar==""||paper=="")
        {
            return res.status(422).json({error:"Please Fill the form correctly"});
    
        }
    
        db.query("INSERT INTO teacher  (firstname,lastname,email,mobile,address,city,pincode,conference,seminar,paper) VALUES(?,?,?,?,?,?,?,?,?,?)", [firstname,lastname,email,mobile,address,city,pincode,conference,seminar,paper], (err, result) => {
            console.log(err);
        })
    })
    app.get("/teachersdata", (req, res) => {
        db.query("SELECT * FROM teacher", (err, result) => {
           
          if (err) {
            console.log(err);
          } else {
            res.send(result);
          }
        });
      });
    app.get("/logout",(req,res)=>{
        console.log("logout page");
        //req.logout()
        console.log( req.session.user)
        res.clearCookie("userid")
        //res.redirect("/login")
        req.session.destroy((err) => {
            res.redirect('/login') // will always fire after session is destroyed
          })

    })

})
app.listen(3001)

Thank you in advance

Answer 1

I think you want this:

    app.get("/teachersdata/:emailId", (req, res) => {
    db.query("SELECT * FROM teacher WHERE email=$1",[req.params.emailId]).then(result) => { 
     if(!result || result.rows[0]) return console.log('not found')
      console.log(result.rows[0])
    }).catch(error=>{
       consol.log(error)
    });
  });