Sending state for an Axios POST and data not showing in req.body

Question

I'm using React and want to make a POST request using Axios. I'm trying to send form data to my Node backend.

I am trying to send an object in the POST request which is the state holding all of the user's inputs to a form.

React

  const [formDetails, setFormDetails] = useState({})
  const handleFormChange = (evt) => setFormDetails({ ...formDetails, [evt.target.name]: evt.target.value })
  const sendInvoice = async (formDetails) => {
    const response = await axios.post('/api/new_invoice', formDetails)
    console.log(response)
}

Node route

module.exports = (app) => {
// Create a new invoice
app.post('/api/new_invoice', async (req, res) => {

    console.log('making a new invoice...')

    try {

        console.log(req.body)
        res.send(req.body)


    } catch (err) {
        console.log(err)
        res.status(400)
        res.send({ error: err })
        return
    }


})
}

This is what I get back:

When I look at the req.body for the response it is an empty object even though I can see that state is there when sending the form.

I also tried hardcoding an object and that will show the data on the req.body.

For example if I change the request to

const response = await axios.post('/api/new_invoice', {formData: 'this is form data'})

Then I am able to see formData: 'this is form data' in the req.body

Answer 1

You need to stringify the formData, In your sendInvoice function,

Also can you share the sample request body from postman of you have tested API there

let body= JSON.stringify(formData)

const config = {
      headers: {
        'Content-Type': 'application/JSON'
      }
    };
const res = await axios.post('/api/v1/new_invoice', body, config);