How to send React form data to backend express server

Question

I have made this react form and want to send the candidate object to the backend express server where I want to console log the candidate object. I have checked that form is taking the input properly. I am using axios to send a post request to the express backend.

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

const Form = () => {
  const [candidate, setCandidate] = useState({
    fullName: "",
    phoneNumber: 0,
    email: "",
    gitProfile: "",
    linkToResume: "",
    designation: "",
    interest: "",
  });

  const onChange = e =>
    setCandidate({ ...candidate, [e.target.name]: e.target.value });

  const onSubmit = e => {
    e.preventDefault();

    axios
      .post("http://localhost:5000/", {
        candidate,
      })
      .then(res => {
        console.log(res, candidate);
      });
  };
  const designationOptions = [
    "--select option--",
    "Graphic Designer",
    "Full Stack Developer",
    "Project Manager",
    "SEO and Digital Marketing",
  ];

  return (
    //form input code
  );
};

export default Form;

This is the backend express server code.

const express = require("express"),
  bodyParser = require("body-parser");
(app = express()), (port = process.env.PORT || 5000), (cors = require("cors"));

app.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true,
  })
);

app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: true,
  })
);

app.get("/", function (req, res) {
  console.log(req.body);
});

app.listen(port, () => console.log(`Backend server live on ${port}`));

I want to send the candidate object and console.log the object but I am getting a 404 error. I have this setup in two different folders under a parent directory.

user3133 · Accepted Answer · 2020-09-25 13:30:48Z

1

You are using app.get while sending request with axios as POST. Try switching app.get to app.post

answered Sep 25, 2020 at 13:30

user3133

6125 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chayan Over a year ago

This solved my problem. Thank you so much. I want to pass the email credential to another file in the same directory for further processing. Can you help me with that?

Collectives™ on Stack Overflow

How to send React form data to backend express server

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related