How to pass data from React component to node server.js?

Question

I have been trying to pass data from my React component to the node server.js. In my React component, inside the componentWillMount, I am making an axios post call and pass countValue.

Here is my code for the React Component:

componentWillMount = () => {

    axios.post("/", {
      countValue: 12
    });
  }

Inside my server.js, I am simply trying to get countValue through req.body.countValue. However, it is always set to "undefined".

req.body just comes out to be empty object, {}.

Here is my code for the server.js

const express = require('express');
const bodyParser = require('body-parser');
const engines = require('consolidate');
const app = express();

app.engine("ejs", engines.ejs);
app.set('views', __dirname);
app.set("view engine", "ejs");

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

app.get("/", (req, res) => {
    console.log(req.body.countValue);
    res.render("index");
});

Could anyone please help me with this issue?

do you have something like app.use(express.json()) or app.use(bodyparser.json()) (needs body-parser package) — 1565986223
– 1565986223, Commented Apr 3, 2019 at 15:42
@naga-elixir-jar Thank you for asking. Yes I do have them. I have updated my code. Do you know how to solve this issue? — Tae Hoon Lee
– Tae Hoon Lee, Commented Apr 3, 2019 at 15:44
axios.post("/", { probably require full uri including scheme (like http or https etc) like: axios.post("http://localhost:port" ...) — 1565986223
– 1565986223, Commented Apr 3, 2019 at 15:47

shushu304 · Accepted Answer · 2019-04-04 07:49:22Z

4

you are making POST request with axios from the frontend,

and configured in the server to listen to GET only...

in the express add:

app.post("/", (req, res) => {
    console.log(req.body.countValue);
    res.render("index");
});

very strange... i tested it and it working,

if you making small app without the react ... it's working?

this is the full test that worked for me:

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.set('view engine', 'ejs');

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

app.get('/', (req, res) => {
    res.render('so');
});

app.post('/', (req, res) => {
    console.log("countValue =", req.body.countValue);
    res.render('so');
});
app.listen(3000, () => {
    console.log('app now listening on port 3000');
});

and the HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SO</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
    axios.post("/", {
        countValue: 12
    });
</script>
</head>
<body>

</body>
</html>

edited Apr 4, 2019 at 7:49

answered Apr 3, 2019 at 15:47

shushu304

1,4981 gold badge9 silver badges15 bronze badges

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

2 Comments

Tae Hoon Lee Over a year ago

I added above code in my server.js file. But it doesn't even get to that console.log in the app.post.. Do you know how to solve this issue?

shushu304 Over a year ago

i made edit after testing it... clean and small app without react. please check if it's working for ...

Collectives™ on Stack Overflow

How to pass data from React component to node server.js?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related