React AXIOS post - simple test not working (express)

Question

I have a built react front end, I used a simple boilerplate to connect the express with react. There seems to be SO many different ways to setup a SIMPLE RESTful api that I'm getting lost. I'm trying to do some very simple backend to front end communication.

I have express do a get request to push to the back and am using Axios to get the data:

AccountsDB is just basic JSON data for internal testing

[
  {
    "id": "5b68d6f13e2c773581221620",
    "index": 0,
    "firstName": "Josefa",
    "lastName": "Lynch",
    "pin" : 1234
  }
]

Inside my express index.js I have a simple GET

app.get('/api/getAccounts', (req, res) => res.json(AccountsDB));

within my React I fetch the data with axois:

componentDidMount () {
    axios.get ('/api/getAccounts')
    .then (res => this.setState({ Accounts : res.data}));
}

Totally works. I display the account within the main react component. Inside the component I also have a forum to "create" a a new account, and push it to the AccountsDB file just for internal testing (I'm learning backend, will connect mongoDB after).

My logic for POST method (found here Axios Cheet Sheet):

    axios.post('/api/putAccounts', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

Which I attach onto a button to post the data. I open up POST man and navigate to '/api/putAccounts' and see nothing.

I don't understand how to exactly gather the data into express. My silly attempt :

app.post('/api/putAccounts', (req,res) => {
    // res.send("sent!") // post man see's this?
    // var account = req.account;
    // res.send(req.firstName);
});

To elaborate in more detail ...

React app is on -> localhost:3000

Express app is on -> localhost:8080

using webpack and a proxy:

 devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/api': 'http://localhost:8080'
    }

under 'http://localhost:3000/admin' (in my react app) I have a button that has the axios.post that send the firstName : Fred and lastName : Flintstone to '/api/putAccounts'

I'm trying to have my express server catch the post so I can manipulate it and add it into a database.

Before I get into database stuff, I'm trying to make sure I understand how POST works (I understand GET). So I'm trying to get the data, and display it somewhere, this is what I mean by viewing it in postman.

Maybe I'm going about this all wrong, hence why the confusion.

user_6903497 · Answer

In postman you need to send firstName and lastName in req body like below while making post request

  {
      "firstName": "Hi",
      "lName": "Hello"
  }

So that you can do req.body.firstName to get its value below

  app.post('/api/putAccounts', (req,res) => {
       const fName = req.body.firstName;
       const lName = req.body.lastName;
       res.json({"fName":fName, "lastName": lName});
  });

React AXIOS post - simple test not working (express)

1 Answers