MySQL insert query successful but not inserting into database table

Question

I am working on a React/MySQL registration page. The insert query runs, but is not inserting into the database table. I am not sure why.

In the backend folder, I have my server.js file:

const express = require("express");
const mysql = require("mysql");
const cors = require("cors");

const app = express();
app.use(cors());
app.use(express.json());

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

app.post("/signup", (req, res) => {
  const sql = "INSERT INTO login (`name`, `email`, `password`) VALUES (?)";
  const values = [req.body.name, req.body.email, req.body.password];
  db.query(sql, [values], (err, data) => {
    if (err) return res.json(err);
    return res.json(data);
  });
});

app.listen(8081, () => {
  console.log("Listening...");
});    

In my frontend folder, I have App.js that looks like this:

import React from "react";
import SignUp from "./SignUp";

function App() {
  return <SignUp></SignUp>;
}

export default App;

And then my SignUp.js file:

import React, { useState } from "react";
import axios from "axios";

function SignUp() {
  const [values, setValues] = useState({
    name: "",
    email: "",
    password: "",
  });
  const handleChange = (event) => {
    setValues({ ...values, [event.target.name]: [event.target.value] });
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    axios
      .post("http://localhost:8081/signup", values)
      .then((res) => console.log("Registered Successfully"))
      .catch((err) => console.log(err));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
          type="text"
          placeholder="Enter Name"
          name="name"
          className="form-control rounded-0"
          onChange={handleChange}
        />
      // 2 more inputs for email and password
    </form>
  );
}

export default SignUp;

NPM start is used to run the backend and frontend.

I am using MAMP server which is running phpMyAdmin on localhost:8888

The form is up and running, and when I enter name, email, and password, the console reads "Registered Successfully" but upon refreshing the database, no records were inserted.

I understand that the query can run successfully without inserting anything, but in this case, I'm not sure why the query is not inserting properly.

What did I do wrong and how can I fix it?

Edit

I made the below edit to server.js as suggested by Phil and MatBailie in the comments below:

app.post("/signup", (req, res) => {
  const sql =
    "INSERT INTO login (`name`, `email`, `password`) VALUES (?, ?, ?)";
  const values = [req.body.name, req.body.email, 
req.body.password];
  db.query(sql, values, (err, data) => {
    // if (err) return res.json(err);
    // return res.json(data);
    if (err) {
      console.error("Error in signup", err);
      return res.sendStatus(500);
    }
  });
});

I am getting the below Axios error in the console:

POST http://localhost:8081/signup 500 (Internal Server Error)

In the network tab, I am seeing this:

Edit 2

The response section of the Axios error reads the following:

Answer 1

try this

const sql = "INSERT INTO login (`name`, `email`, `password`) VALUES (?, ?, ?)";

or

const sql = "INSERT INTO login SET ?";
db.query(sql, request.body, (err, data) => {
   if (err) return res.json(err);
   return res.json(data);
});

Answer 2

Turns out the MAMP server was my issue. After switching to XAMPP, I was able to capture the form data into the database.