Having issues connecting to express backend with React - reactjs

Question

Trying to set up a register form using react and then sending the form to my express backed to create the user. The request is getting to the back-end but none of the form data is there.
When i console.log the request body and params, only an empty object gets returned
Here is my react register code
import React from 'react'
class Register extends React.Component {
state = {
name: "",
username: "",
password: ""
}
handleChange = event => {
const { name, value } = event.target
this.setState({[name]:value})
}
handleSubmit = event => {
event.preventDefault();
fetch("/api/register", {
method: "POST",
body: JSON.stringify(this.state)
})
.then((result)=> result.json())
.then((info) => { console.log(info); })
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type="text" name="name" value={this.state.name} placeholder="name" onChange={this.handleChange} />
<input type="text" name="username" value={this.state.username} placeholder="username" onChange={this.handleChange} />
<input type="password" name="password" value={this.state.password} placeholder="password" onChange={this.handleChange} />
<button>Register</button>
</form>
</div>
)
}
}
export default Register
Express code
const express = require("express"),
passport = require("passport"),
User = require("../models/user");
const router = express.Router({mergeParams: true});
// /api before this
router.post("/register", (req, res)=>{
const newUser = new User({
username: req.body.username,
name: req.body.name
});
User.register(newUser, req.body.password, (err, user)=>{
if(err) {
console.log(err);
}
passport.authenticate("local")(req, res, ()=>{
res.redirect("/user/" + user._id);
});
});
});
module.exports = router;
Now im getting a 400 bad request error and another error that says: register:1 Uncaught (in promise) SyntaxError: Unexpected token B in JSON at position 0

Answer 1

I would say that the url from the fetch action is not matching your express route
/api/register > /register
Try adding /api to the express route or remove from the fetch action
I also noticed your route is not returning anything.
You have to return something in the response object.
res.json(newUser);
router.post("/register", (req, res)=>{
const newUser = new User({
username: req.body.username,
name: req.body.name
});
// some code
return res.json(newUser);
});