I am stuck and need help submitting form data in React to my express API. How can I configure the form to send a POST Request to /api/register so the user’s account can be created? (certain checks like duplicate users and such still need to be added but this is what I have so far)
Express app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var helmet = require('helmet')
var index = require('./routes/index');
var register = require('./routes/register');
var app = express();
// Connect to mongoose
mongoose.Promise = global.Promise;
mongoose.connect("mongodb://localhost/mydatabase");
// MongoDB Users Schema (Used for Login and Registration)
var userSchema = new mongoose.Schema({
username: String,
email: String,
password: String,
salt: String,
usergroup: 0,
});
var User = mongoose.model("User", userSchema);
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(helmet())
app.use('/', index);
app.use('/api/register', register);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
Register.js Express Route
var express = require('express');
var router = express.Router();
/* GET api/register */
router.get('/', function(req, res, next) {
res.status(503).send("Oh noes! You sent a GET request - please send your request as a POST request. K Thx Bye!");
});
/* POST api/register */
router.post('/', function(req, res, next) {
if (!req.body) return res.sendStatus(400)
var regdata = new User(req.body);
regdata.save()
.then(item => {
res.status(200).send("Success, Your registration has been saved to the database!")
})
.catch(err => {
res.status(400).send("Unable to save the item to the database!");
});
});
module.exports = router;
Register.js React View
import React from 'react'
var panelStyle = {
'max-width': '80%',
margin: '0 auto'
}
const Register = () => (
<div>
<div class="panel panel-primary" style={panelStyle}>
<div class="panel panel-heading">React Forum - Register</div>
<div class="panel panel-body">
<form onsubmit="return false;">
<strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" /> <br />
<strong>Email:</strong> <br /> <input type="email" name="email" placeholder="me@example.com" /> <br />
<strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="me@example.com" /> <br />
<strong>Password:</strong> <br /> <input type="password" name="password" placeholder="********" /> <br />
<strong>Confirm Password:</strong> <br /> <input type="password" name="confirmpassword" placeholder="********" /> <br /><br />
<button class="btn btn-primary">Register Account</button>
</form>
</div>
</div>
</div>
)
export default Register