How to send the data to server in react?

Question

Please help me to fix my issue. I am building react project using material ui. This is contact us part in my project. I want to send email when visitor see this site then.

Backend is working well with postman. But when I use front end request, Backend don't receive any values.

This is my code(Front).

import { React, useState } from 'react';
import axios from 'axios';
// material
import { Button, Typography, TextField, Stack } from '@material-ui/core';
//
import { varFadeInUp, MotionInView } from '../../animate';

// ----------------------------------------------------------------------

export default function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');

  const basicUrl = 'http://localhost:8080/';

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

    const data = {
      name,
      email,
      subject,
      message
    };

    axios.post(basicUrl, data).then((res) => {
      console.log(res);
    });
  };

  const handleNameChange = (e) => {
    setName(e.target.value);
  };
  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };
  const handleSubjectChange = (e) => {
    setSubject(e.target.value);
  };
  const handleMessageChange = (e) => {
    setMessage(e.target.value);
  };

  return (
    <Stack spacing={5}>
      <MotionInView variants={varFadeInUp}>
        <Typography variant="h3">
          Feel free to contact us. <br />
          We'll be glad to hear from you
        </Typography>
      </MotionInView>

      <Stack spacing={3}>
        <MotionInView variants={varFadeInUp}>
          <TextField fullWidth label="Name" onChange={handleNameChange} />
        </MotionInView>

        <MotionInView variants={varFadeInUp}>
          <TextField fullWidth label="Email" onChange={handleEmailChange} />
        </MotionInView>

        <MotionInView variants={varFadeInUp}>
          <TextField fullWidth label="Subject" onChange={handleSubjectChange} />
        </MotionInView>

        <MotionInView variants={varFadeInUp}>
          <TextField fullWidth label="Enter your message here." multiline rows={4} onChange={handleMessageChange} />
        </MotionInView>
      </Stack>

      <MotionInView variants={varFadeInUp}>
        <Button size="large" variant="contained" onClick={handleEmailSender}>
          Submit Now
        </Button>
      </MotionInView>
    </Stack>
  );
}

This is my backend Code.

const express = require("express");
const cors = require("cors");
const app = express();
const nodemailer = require("nodemailer");

app.use(cors());

// This responds with "Hello World" on the homepage
app.post("/", function (req, res) {
  response = {
    name: req.query.name,
    email: req.query.email,
    subject: req.query.subject,
    message: req.query.message,
  };

  console.log(response.name);

  let mailTransporter = nodemailer.createTransport({
    service: "gmail",
    auth: {
      user: "xxxxxx",
      pass: "xxxxxx",
    },
  });

  let mailDetails = {
    from: response.email,
    to: "xxxxxxx",
    subject: response.subscribe,
    text: response.message,
  };

  mailTransporter.sendMail(mailDetails, function (err, data) {
    if (err) {
      console.log("Error Occurs");
    } else {
      console.log("Email sent successfully");
    }
  });
  res.send();
});

// This responds a GET request for the homepage
// app.get("/", function (req, res) {
//   console.log("Got a GET request for the homepage");
//   res.send("Hello GET");
// });
app.listen(8080, function () {
  console.log("Server is running at http://localhost:8080/");
});

Please help me please :-)

Answer 1

Try using req.body and have a look at this post on how to append form data: axios post request to send form data

app.post("/", function (req, res) {
  console.log({req})

  response = {
    name: req.body.name,
    email: req.body.email,
    subject: req.body.subject,
    message: req.body.message,
  };