Data from my react front end not getting to mysql database

Viewed 22

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");
});
1 Answers

Your server is running on PORT 3001 whereas from your client you are calling the API endpoint on PORT 3000. Have you used proxy in client side. Have you added this line in package.json file?

"proxy": "http://localhost:3001"
Related