I am using create-react-app and every thing is up to date but when i try and console.log the req.body i get nothing and when i try res.json(req.body) i get an empty object i should also mention that i am using a proxy for the server since create-react-app listens on another port for live updates, the code is as follows…
server.js
const express = require('express');
const app = express();
app.use(express.json({ extended: false }));
app.use('/mail', require('./routes/mail'));
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => console.log(`Listening on port ${PORT}...`));
routes/mail.js (route)
const express = require('express');
const router = express.Router();
// const nodemailer = require('nodemailer');
require('dotenv').config();
router.post('/', (req, res) => {
console.log(req.body);
res.send('this works');
});
module.exports = router;
Contact.js (react component where the form is)
import React, { useState } from 'react';
const Contact = () => {
const [name, setName] = useState('');
const [phone, setPhone] = useState('');
const [msg, setMsg] = useState('');
const clear = e => {
setName('');
setPhone('');
setMsg('');
e.preventDefault();
};
return (
<section className='contact-section' id='contact'>
<h4>Connect With Me Below</h4>
<form action='/mail' method='POST'>
<div className='form-group'>
<div className='form-input'>
<label htmlFor='name'>Name</label>
<input
type='text'
name='name'
value={name.value}
onChange={setName}
/>
</div>
<div className='form-input'>
<label htmlFor='phone'>Phone</label>
<input
type='text'
name='phone'
value={phone.value}
onChange={setPhone}
/>
</div>
</div>
<div className='form-input'>
<label htmlFor='msg'>Message</label>
<textarea
type='text'
name='msg'
value={msg.value}
onChange={setMsg}
/>
</div>
<input type='submit' value='Connect' onSubmit={clear} />
</form>
</section>
);
};
export default Contact;