Working on a React/MySQL registration page. Insert query run, but is not inserting into the dB table. 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:
2
Answers
Turns out the MAMP server was my issue. After switching to XAMPP, I was able to capture the form data into the database.
try this
or