Post request sent a null object. React app - reactjs

Question

I'm building a simple React app that would create contacts and use them to schedule meetings.
I'm tried to build a backend that would save contacts submitted by client to a database. I used Express for the server and routing and postgresql for the database.
However after I implemented a post request method for adding contacts, the backend receives a null empty object after submitting a new contact. I included the frontend code component that implements the post request and the backend router.
Frontend
export const ContactsPage = (props) => {
const [name, setName] = useState('');
const [phone, setPhone] = useState('');
const [email, setEmail] = useState('');
const [duplicate, setDuplicate] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
/*
Add contact info and clear data
if the contact name is not a duplicate
*/
if(!duplicate){
props.addContacts(name,phone,email);
setName('');
setPhone('');
setEmail('');
}
//Post request
const data = { name, phone, email };
fetch('http://localhost:5000/api/contacts', {
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
data: JSON.stringify(data)
}).then(() => {
console.log({name,phone,email})
}).catch(error => {
// handle network errors
console.error(error);
});
};
/*
Using hooks, check for contact name in the
contacts array variable in props
*/
useEffect(() => {
const nameIsDuplicate = () => {
const found = props.contacts.find((contact) => contact.name === name);
if (found !== undefined) {
return true;
} else {
return false;
}
};
if (nameIsDuplicate()===true) {
setDuplicate(true);
} else {
setDuplicate(false);
}
}, [name,duplicate,props.contacts]);
return (
<div>
<section>
<h2>
Add Contact
{duplicate? "- Name already exists -" : ""}
</h2>
<ContactForm
name = {name}
email = {email}
phone = {phone}
setName = {setName}
setEmail = {setEmail}
setPhone = {setPhone}
onSubmit = {handleSubmit} />
</section>
<hr />
<section>
<h2>Contacts</h2>
<TileList
list={props.contacts}
/>
</section>
</div>
);
};
Backend:
app.use(bodyParser.json());
app.use(cors({ origin: 'http://localhost:3000'}));
app.get('/api/contacts', (request,response,next) => {
pool.query('SELECT * FROM contacts', (err, res) => {
if (err) return next(err);
response.json(res.rows);
});
});
app.post('/api/contacts', (request, response, next) => {
const { name, email, phone } = request.body;
pool.query(
'INSERT INTO contacts(name, phone, email) VALUES($1, $2, $3)',
[name,phone,email],
(err, res) => {
if (err) return next(err);
response.redirect('/api/contacts');
}
);
});
app.use((err,req,res,next) => {
res.json(err);
})
const port = 5000;
app.listen(port, () => console.log(`Server started on port ${port}`));

Answer 1

I figured out the problem. The post request header had the wrong key for request body. "data" instead of "body"
fetch('http://localhost:5000/api/contacts', {
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)