Getting a specific user from MYSQL with axios Get

Question

I'm at the very end of my project, I'm using react js frontend and express and mysql, I have everything working but the last step, I have a input field that is suppose to allow a user to enter a email or phone number and hit search, It's suppose to search the database and display that user's info, I have it when you hit search it displays all the data from the database, I need it to search and find the data the user is requesting, I can't find any documentation. here is my front end code.

import React, { useState, useEffect } from "react";
import "./Home.css";
import BattleAxe from "./battleaxes.png";
import { Link } from "react-router-dom";
import axios from "axios";

export default function Home() {
  const [searchResults, setSearchResults] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.get("http://localhost:3001/api/get").then((response) => {
      setSearchResults(response.data);
    });
  };

  return (
    <div className="home-container">
      <img src={BattleAxe} alt="" className="axe-image" />
      <div>
        <h2 className="heading"> Welcome to Battle Axes!</h2>
      </div>
      <div className="split">
        <div className="newc">
          <p className="info1">
            <strong>First Timer?</strong>
          </p>
          <p className="info3">
            Click the 'New Customer'
            <br />
            button to get started.
          </p>
          <Link to="/NewCustomer">
            <button className="new-customer">New Customer</button>
          </Link>
        </div>
        <div className="returnc">
          <h3 className="info2">Returning Customer?</h3>
          <p className="info4">
            Enter your Email or Phone
            <br />
            below to find your acount.
          </p>
          <form onSubmit={handleSubmit}>
            <input type="text" className="text-field" />
            <button className="search-btn">Search</button>
          </form>
        </div>
      </div>
      <div className="search-results">
        {searchResults.map((val) => {
          return (
            <p className="srlist">
              {val.firstName} | {val.lastName}
              <br />
              <br />
              {val.email}
              <br />
              <br />
              {val.phone}
              <Link to="/WaiverForm">
                <button className="sel-btn">Select</button>
              </Link>
            </p>
          );
        })}
      </div>
    </div>
  );
}

here is my backend.

const express = require("express");
const app = express();
const mysql = require("mysql");
const bodyParser = require("body-parser");
const cors = require("cors");
const { response } = require("express");

const db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "Killer12!",
  database: "cloneDataBase",
});

app.use(cors());

app.use(express.json());

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/api/get", (req, res) => {
  const sqlGet = "SELECT * FROM customer_registration";
  db.query(sqlGet, (error, result) => {
    res.send(result);
  });
});

app.post("/api/post", (req, res) => {
  const { firstName, lastName, email, phone, nickName } = req.body;
  const sqlInsert =
    "INSERT INTO customer_registration (firstName, lastName, email, phone, nickName) VALUES (?,?,?,?,?)";
  db.query(
    sqlInsert,
    [firstName, lastName, email, phone, nickName],
    (error, result) => {
      if (error) {
        console.log(error);
        res.send("False");
      }
    }
  );
  res.send("Customer created");
});

app.post("/api/waiver", (req, res) => {
  const userSignature = req.body.userSignature;
  const sqlInsert = "INSERT INTO waiver_signature (userSignature) VALUES (?)";
  db.query(sqlInsert, userSignature, (err, result) => {
    if (err) {
      console.log(err);
    }
  });
  res.send("Signature created");
});

app.listen(3001, () => {
  console.log("running on port 3001");
});

Answer 1

You can create an endpoint where you are receving query params either email or phone number

app.get("/api/get", (req, res) => {
    let email = req.query.email ?? '';
    let phone = req.query.phone ?? '';

  const sqlGet = "SELECT * FROM customer_registration WHERE email = ? OR phone = ?";
  db.query(sqlGet, [email, phone], (error, result) => {
    res.send(result);
  });
});

In your frontend, you can send data in query params, You can plug in your email and phone like this below

axios.get("http://localhost:3001/api/get", { params: { email: email, phone: phone} })