I have a react front-end, node server, and MySQL database. I'm making use of express server and Axios for my post request. The code doesn't appear to have an error, also in the console and network in chrome. However, no data gets to my database. I'll really appreciate the help. Here are my codes;
Client
import React, { useState } from 'react';
import './register.css';
import {Link} from 'react-router-dom';
import Image from '../../assets/Image.png';
import Axios from 'axios';
const Register = () => {
const [uploadReq, setUploadReq] = useState('')
const [usernameReq, setUsernameReq] = useState('')
const [fullnameReq, setFullnameReq] = useState('')
const [emailReq, setEmailReq] = useState('')
const [passwordReq, setPasswordReq] = useState('')
const registration = () => {
Axios.post("http://localhost3000/register",{
upload: uploadReq,
username: usernameReq,
fullname: fullnameReq,
email: emailReq,
password: passwordReq,
}).then((response) => {
console.log(response);
});
};
return (
<div className='register section__padding'>
<div className="register-container">
<h1>register</h1>
<p className='upload-file'>Upload Profile pic</p>
<div className="upload-img-show">
<img src={Image} alt="banner" />
<p>browse media on your device</p>
</div>
<form className='register-writeForm' autoComplete='off' >
<div className="register-formGroup">
<label>Upload</label>
<input type="file" className='custom-file-input'
onChange={(e) => {
setUploadReq(e.target.value);
}}
/>
</div>
<div className="register-formGroup">
<label>Full Name</label>
<input type="text" placeholder='Name'
onChange={(e) => {
setFullnameReq(e.target.value);
}}
/>
</div>
<div className="register-formGroup">
<label>Username</label>
<input type="text" onChange={(e) => {
setUsernameReq(e.target.value);
}}placeholder='Username' />
</div>
<div className="register-formGroup">
<label>Email</label>
<input type="email" placeholder='Email'
onChange={(e) => {
setEmailReq(e.target.value);
}}
/>
</div>
<div className="register-formGroup">
<label>Password</label>
<input type="text" onChange={(e) => {
setPasswordReq(e.target.value);
}} placeholder='Password' />
</div>
<div className="register-button">
<button className='register-writeButton' onClick={registration}>register</button>
<Link to="/login">
<button className='reg-login-writeButton' >Login</button>
</Link>
</div>
</form>
</div>
</div>
)
};
export default Register;
Server
const express = require("express");
const app = express();
const mysql = require("mysql");
const cors = require("cors");
app.use(express.json());
app.use(cors());
const db = mysql.createPool({
host: "localhost",
user: "root",
password: "xyz",
database: "nftdatabase",
});
app.post('/register', (req, res) => {
const upload = req.body.upload
const Fullname = req.body.fullname
const Username = req.body.username
const Email = req.body.email
const Password = req.body.password
db.query("INSERT INTO user (upload, fullname, username, email, password) VALUES (?,?,?,?,?)",
[upload, Fullname, Username, Email, Password],
(err, result) => {
console.log(err);
});
});
app.listen(3001, () => {
console.log("running on port 3001");
});