Express.js POST request not working, not sending to database

Question

I'm working on a website which has a basic post code with express and when I go to the localhost site running the request (in this case localhost:3002/putElement) I get the message 'cannot GET /putElement'.

1. I'm using Axios with NodeJS to get/post information into my database
2. The app.get("", (req, res) => {}) function works, but doesn't when using app.post

REACT code:

import Axios from "axios";
export const SubmitItem = () => {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [itemsList, setItemsList] = useState([]);
  const postItem = () => {
    Axios.post("http://localhost:3002/putElement", {
      name: name,
      image: image,
      size: size,
      category: category,
      description: description,
      price: price,
      seller: seller,
    }).then(() => {
      setItemsList([
        itemsList,
        {
          name: name,
          image: image,
          size: size,
          category: category,
          description: description,
          price: price,
          seller: seller,
        },
      ]);
    });
  };
  console.log(itemsList);
  return (
    <div className="submitBody">
      <div className="container bg-white mt-3 mb-3">
        <div className="row">
          <div className="col-sm-2 m-4">
            <div className="mt-2">Item Title:</div>
            <br />
            <div className="mt-2">Description:</div>
          </div>
          <div className="col-sm-1"></div>
          <div className="col-sm-5 mt-2">
            <div className="mt-4">
              <input
                type="text"
                name=""
                id=""
                onChange={(e) => setName(e.target.value)}
              />
            </div>
            <div className="mt-4">
              <input
                type="text"
                name=""
                id=""
                onChange={(e) => setDescription(e.target.value)}
              />
            </div>
          </div>
        </div>
        <div className="mb-4" style={{ width: "50%" }}>
          <button type="submit" className="submitButton" onClick={postItem}>
            Submit
          </button>
        </div>
      </div>
    </div>
  );
};

NodeJS code:

const express = require("express");
const mysql = require("mysql");
const app = express();
const cors = require("cors");
app.use(cors());
app.use(express.json());

// Creating connection
let db = mysql.createConnection({
  host: "localhost",
  port: "3325",
  user: "root",
  password: "",
  database: "clothingstore",
});
app.post("/putElement", (req, res) => {
  res.send("works");
  const name = req.body.name;
  const description = req.body.description;
  const sql = `INSERT INTO shirt ( 'name', 'description') VALUES (?, ?)`;
  db.query(sql, [name, description], (err, result) => {
    res.send(result);
  });
});
app.listen(3002, () => {});

Answer 1

The process of inserting into the database is a promise, Try to clean your ui code. It does not look good, try using async await and see

app.post("/putElement", async (req, res) => {
      res.send("works");
      const name = req.body.name;
      const description = req.body.description;
      const sql = `INSERT INTO shirt ( 'name', 'description') VALUES (?, ?)`;
      await db.query(sql, [name, description], (err, result) => {
        res.send(result);
      });
    });