Axios POST request to Mongodb not working - node.js

Question

I have a Sign Up modal in my React Bootstrap App to allow registration for new users. I set an onChange event for each attributes to be stored in the database and user should be saved to database if the button Sign Up is clicked, triggering the onClick button. The problem is, the user won't be saved to Mongodb at all. I'm certain the problem is within the SignUpModal code since I did try passing it via node.js on index.js and it worked. The codes are below:
SignUpModal.js (client side)
const [userEmail, setEmail] = useState("");
const [userPassword, setPassword] = useState("");
const [userFullName, setFullName] = useState("");
const [userType, setType] = useState("");
//add user to database
const addUser = () => {
Axios.post("/addUser", {
userEmail: userEmail,
userPassword: userPassword,
userFullName: userFullName,
userType: userType,
});
};
return(
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Sign Up Form
</Modal.Title>
</Modal.Header>
<Form>
<Modal.Body>
<Form.Group className="mb-3" controlId="userEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter your email here"
onChange = {(event) => {
setEmail(event.target.value);
}}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="userPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Enter your password here"
onChange = {(event) => {
setPassword(event.target.value);
}}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="userFullName">
<Form.Label>Full Name</Form.Label>
<Form.Control type="text" placeholder="Enter full name here"
onChange = {(event) => {
setFullName(event.target.value);
}}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formType">
<Form.Label>I am a... (Tick one of the options below):</Form.Label>
{['radio'].map((type) => (
<div key={`inline-${type}`} className="mb-3">
<Form.Check
inline
label="Client"
name="group1"
type={type}
id={`inline-${type}-1`}
onChange = {(event) => {
setType(event.target.value);
}}
/>
<Form.Check
inline
label="Service provider"
name="group1"
type={type}
id={`inline-${type}-2`}
onChange = {(event) => {
setType(event.target.value);
}}
/>
</div>
))}
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
<Button variant="primary" type="submit" onClick= {addUser}>
Sign Up!
</Button>
</Modal.Footer>
</Form>
</Modal>
)
}
index.js (server side)
const express = require("express");
const app = express();
const mongoose = require("mongoose");
const UserModel = require("./models/User");
const cors = require("cors");
app.use(express.json());
app.use(cors());
mongoose.connect("mongodb+srv://tryweb:password1234#cluster5.c58gv.mongodb.net/user?retryWrites=true&w=majority",
{
useNewUrlParser: true,
});
app.post("/addUser", async(req, res) => {
const user = new UserModel(
{ userEmail: req.body.userEmail,
userPassword: req.body.userPassword,
userFullName: req.body.userFullName,
userType: req.body.userType
}
);
try{
await user.save();
}
catch(err){
console.log(err);
}
});
app.listen(3000, () => {
console.log("Server running in port 3000...");
});
I have tried changing the URL to http://localhost:3000/addUser and it still does not work. Anyone knows what I am doing wrong?

Answer 1

This looks good, but you might be hitting an error with the data or within the browser. Try logging the data as it comes into the request with console.log(req.body).
Try this:
Assuming that your ./models/User looks something like this:
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
let User = new Schema(
{
userEmail: {
type: String
},
userPassword: {
type: String
},
userFullName: {
type: String
},
userType: {
type: String
}
},
{ collection: "Users" }
);
module.exports = mongoose.model("User", User);
And the code:
const express = require("express");
const app = express();
const mongoose = require("mongoose");
const UserModel = require("./models/User");
const cors = require("cors");
app.use(express.json());
app.use(cors());
const mongooseConnectionString = "mongodb+srv://tryweb:password1234#cluster5.c58gv.mongodb.net/user?retryWrites=true&w=majority";
const mongooseConnection = mongoose.connect(mongooseConnectionString,
{
useNewUrlParser: true,
});
// Let us know we established connection
mongooseConnection.once("open", function() {
console.log("MongoDB database connection established successfully");
});
app.post("/addUser", async(req, res) => {
const user = new UserModel(req.body);
try{
await user.save();
response.send(user);
}
catch(err){
console.log(err);
response.status(500).send(error);
}
});
app.listen(3000, () => {
console.log("Server running in port 3000...");
});