Getting bad request error on forn submission in react - reactjs

Question

This the component I created. I can get the contact in console but throws error on submission. I can post the data through Postman; the problem occurs when I submit the form. Where is the error in the handlesubmit function?
import axios from 'axios';
import React, { useState } from 'react';
const ContactForm = () => {
const [contact, setContact] = useState({
firstName: '',
lastName: '',
phoneNumber: '',
email: '',
message: '',
});
function handleChange(e) {
setContact({ ...contact, [e.target.name]: [e.target.value] });
}
function hanhdleSubmit(e) {
e.preventDefault();
console.log(contact);
axios
.post('http://localhost:8080/contact', contact)
.then((response) => {
console.log('Response after post api', response.data);
})
.catch((error) => {
console.log('Error while post api', error);
});
}
return (
<div className="box poptrox-popup ">
<form onSubmit={hanhdleSubmit} noValidate>
<div className="row gtr-uniform">
<div className="col-6 col-12-xsmall">
<input
type="text"
placeholder="First Name"
value={contact.firstName}
name="firstName"
onChange={handleChange}
autoComplete="off"
/>
<br />
</div>
<div className="col-6 col-12-xsmall">
<input
type="text"
placeholder="Last Name"
value={contact.lastName}
name="lastName"
onChange={handleChange}
autoComplete="off"
/>
<br />
</div>
<div className="col-6 col-12-xsmall">
<input
type="tel"
placeholder="Phone Number"
value={contact.phoneNumber}
name="phoneNumber"
onChange={handleChange}
autoComplete="off"
/>
<br />
</div>
<div className="col-6 col-12-xsmall">
<input
type="email"
placeholder="Email"
value={contact.email}
name="email"
onChange={handleChange}
autoComplete="off"
/>
<br />
</div>
<div className="col-6 col-12-xsmall">
<textarea
placeholder="Please type what you are looking from us?"
value={contact.message}
name="message"
onChange={handleChange}
/>
<br />
</div>
<div className="col-12">
<button type="submit">Submit</button>
<h1>First Name:{contact.firstName}</h1>
<h1>Last Name:{contact.lastName}</h1>
<h1>Phone Number:{contact.phoneNumber}</h1>
<h1>Email:{contact.email}</h1>
<h1>message:{contact.message}</h1>
</div>
</div>
</form>
</div>
);
};
export default ContactForm;
This is the error I'm getting:
{
"timestamp": "2020-12-04T18:32:39.945+00:00",
"status": 400,
"error": "Bad Request",
"message": "",
"path": "/contact"
}

Answer 1

I think it's the syntax of the body sent to the backend, the second parameter of your axios.post should be an object :
axios
.post('http://localhost:8080/contact', contact)
should be
axios
.post('http://localhost:8080/contact', { contact })