MERN stack: Cast to Number failed for value 'NaN' - node.js

Question

I'm creating a simple user registration page where account level (1 = user & 2= admin) is putting up an error when i post a request through axios. This seemed to be a somewhat common error corrected mostly by having a default number value in the schema, which I already have. Furthermore, I do not come across this error when I test with postman.
Error:
Error: users validation failed: accLevel: Cast to Number failed for value "NaN" (type number) at path "accLevel", username: Path `username` is required., password: Path `password` is required.
at ValidationError.inspect (E:\SLIIT\Y2S2\ITP\FitnessFactory\backend\node_modules\mongoose\lib\error\validation.js:48:26)
However, when I test with post man I do not get this error and mongodb works. Like so. It also works for accLevel in int form.
{
"username": "Mary",
"password": "mary",
"accType": "customer",
"accLevel": "1"
}
Heres the user schema
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const userSchema = new Schema({
username : {
type: String,
required: true
},
password : {
type: String,
required: true
},
accType: {
enum: ["customer", "instructor"],
//required: true
},
accLevel: {
type: Number,
default: 1
}
})
const User = mongoose.model('users', userSchema);
module.exports = User;
Heres the user route and controller file
const router = require("express").Router();
let User = require("../models/user");
//createUserAccount
router.route("/createUserAccount").post((req,res) => {
const username = req.body.username;
const password = req.body.password;
const accType = req.body.accType;
const accLevel = Number(req.body.accLevel);
const newUser = new User({
username,
password,
accType,
accLevel
})
newUser.save().then(() => {
res.json("User account created")
}).catch((err) => {
console.log(err);
})
})
//login
router.route("/userLogin/:id").post(async(req,res) => {
})
module.exports = router;
Heres is the component file for createUserAccount.jsx
//Create account component
import React, {useState} from "react";
import axios from 'axios';
//bootstrap imports
import Form from 'react-bootstrap/Form';
import Button from "react-bootstrap/Button";
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
//custom styles
import '../styles/CreateAccount.css';
function CreateAccount(){
//set states
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [reEnterPassword, setReEnterPassword] = useState("");
const [accType, setAccType] = useState("");
const [accLevel, setAccLevel] = useState("");
//handle change
function handleSubmit(e){
e.preventDefault();
if (password !== reEnterPassword){
alert("Passwords do not match!")
}
else if (accType === ''){
alert("Select account type!")
}
else if (accLevel === ''){
alert("Select account level!")
}
else{
const newUser = {
username,
password,
accType,
accLevel
}
console.log(newUser);
axios.post("http://localhost:8070/user/createUserAccount").then(()=>{
alert("account created")
}).catch((err)=>{
alert(err)
})
}
}
return (
<div>
<div className='createAccountBlock'>
<h1>Create Account</h1>
<form onSubmit={handleSubmit}>
<Form.Group name="username" className="mb-3" controlId="username">
<Form.Label>Username</Form.Label>
<Form.Control type="text" placeholder="Enter Username" className='formText'
onChange = {(e)=>{
setUsername(e.target.value);
}}
/>
</Form.Group>
<Form.Group name="password" className="mb-3" controlId="password">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" className='formText'
onChange = {(e)=>{
setPassword(e.target.value);
}}
/>
</Form.Group>
<Form.Group name="reEnterPassword" className="mb-3" controlId="reEnterPassword">
<Form.Label>Re-enter Password</Form.Label>
<Form.Control type="password" placeholder="Re-enter Password" className='formText'
onChange = {(e)=>{
setReEnterPassword(e.target.value);
}}
/>
</Form.Group>
<Container>
<Row>
<Col>
<Form.Select name="accType" aria-label="Default select example"
onChange = {(e)=>{
setAccType(e.target.value);
}}
>
<option>Select Account Type</option>
<option value="customer">Customer</option>
<option value="instructor">Instructor</option>
</Form.Select>
</Col>
<Col>
<Form.Select name="accLevel" aria-label="Default select example"
onChange = {(e)=>{
setAccLevel(e.target.value);
}}
>
<option>Select Account Level</option>
<option value="1">Level 1 (user)</option>
<option value="2">Level 2 (admin)</option>
</Form.Select>
</Col>
</Row>
<div className='flex-container'>
<Button variant="primary" type="submit" className='btn1'>
Create Account
</Button>
</div>
</Container>
</form>
</div>
</div>
);
}
export default CreateAccount;
It works when I test with postman for both int and string, but fails using axios. Btw, I tried parseInt from the frontend as well.
Any Ideas?

Answer 1

It doesn't look like you're sending a data object in your POST request.
axios.post("http://localhost:8070/user/createUserAccount").then(()=>{
alert("account created")
}).catch((err)=>{
alert(err)
})
axios.post needs a second argument of the object that you are sending.