How to send the data to server in react? - node.js

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,
};