Using POST with React Fetch returns an empty object?

Question

I have a very simple backend server built in Node/Express that accepts a post request via

app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json())

app.post('/auth/login', (req, res) => {
  console.log(req.body);
  res.send(req.body);
});

When I send a POST to this via Postman with key/value in the body it returns in Postman as expected and I can see in my NodeJS console that the exchange is happening via the console.log. However, when I do the same thing with React, it just logs an empty object.

This is my React:

handleSubmit(e) {
  e.preventDefault();
  const { email } = this.state;

  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type':'application/json'
    },
    body: {
      "email": email
    }
  });

  console.log("EMAIL", email)
}

I have state being updated as the user types in their email and when they click the submit button it triggers this handleSubmit().

However the output is a lackluster empty {}

I am not sure what I am doing wrong here that the API wouldn't log the state? React logs the data getting posted to the API and it looks valid.

Update

Here is the code that is updating the state:

 handleChange(e) {
   const email = e.target.value;

   this.setState({
     email,
   });
 }

Update, I wasn't using .then() to return the data hence why I was getting an empty object.

can you post your setState function which changes the email? — Marouen Mhiri
– Marouen Mhiri, Commented Jan 15, 2018 at 15:50

egorchik · Accepted Answer · 2018-01-15 15:54:50Z

3

fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type':'application/json'
    },
    body: {
      "email": email
    }
  }).then(res => console.log(res));

you need use .then()

answered Jan 15, 2018 at 15:54

egorchik

5491 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HellaDev Over a year ago

This was it. Thank you! I am new to using fetch for POST requests. It's been all get requests up until now. It makes total sense that my code was incomplete without the .then()

Collectives™ on Stack Overflow

Using POST with React Fetch returns an empty object?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related