req.body is undefined - React & Nodejs - node.js

Question

This is my first time using react and node js. So for react, I have this form:
<form onSubmit={register}>
<label>First Name: </label>
<input required type="text" id="firstName" name="firstName" onChange={formValues}>
So here is what I wrote for the onChange function to update my hook
const formValues = (event) => {
setUserDetails({
...userDetails,
[event.target.name]: event.target.value
});
}
This is how I wrote my hook
const [userDetails, setUserDetails] = useState({
firstName: ''
});
For the onSubmit, this is how I wrote it
const register = async (event) => {
event.preventDefault();
const body = JSON.stringify({
firstName: userDetails.firstName
});
const response = await axios.post("/auth/register", body, {
header: {
'Content-Type': 'application/json'
}
});
}
Finally, when I try to console.log
console.log("the request body: ", req.body);
console.log("the first name", req.body.firstName);
Here are the results:
the request body: [Object: null prototype] {'{"firstName":"dawd"}': ''}
the first name undefined
This is confusing to me since I have the value for "req.body" but when I tried to get the value for the first name I get an undefined.
In my app.js which is my server, I have body-parser and it is still doesn't seem to fix the issue
const bodyParser = require('body-parser');
const express = require("express"); // Start server from nodejs
const app = express();
// Using body-parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
Any help would be greatly appreciated.

Answer 1

Unlike fetch, axios takes an object as body as pointed out by #Thanh. So when you convert your body into a string with JSON.stringify, axios converts it back into an object by taking the string and using it as the object's key, hence {'{"firstName":"dawd"}': ''}. You should pass an object directly into axios for it to be recived properly on the server side. So your register function should look like this:
const register = async (event) => {
event.preventDefault();
const body = {firstName: userDetails.firstName};
const response = await axios.post("/auth/register", body, {
header: {
'Content-Type': 'application/json'
}
});
}

Answer 2

While passing the data to axios you donot need to use JSON.stringify. You can directly pass the data as object.
const body = {
firstName: userDetails.firstName
};

Answer 3

axios post does not require stringify, so your body can be { firstName: userDetails.firstName }