POST form data to server using React.js and Express.js

Question

---

Introduction

I am just beginning in MERN Stack and am currently trying to POST data from a form located in RegisterModal.js to server.js

The index.html file gets its content from index.js which renders App.js and depending on the button clicked different components are rendered. (This is what I understand)

One of them being RegisterModal.js, I am trying to post data from this form to server.js

The code for both files are located below and my project structure is as follows. (The rest of the code is located on github http://github.com/yenvanio/testapp )

---

Error

The error I am getting is "Cannot post to /register" and the console gives me a error of not found.

---

Project Structure

 - .idea
 - build
 - node_modules
 - public
   -  index.html
   -  server.js
 - src
   - components
      - AdminLoginModal.js
      - PopUp.js
      - RegisterModal.js
      - UserLoginModal.js
   - App.js
   - index.js
 - package.json

---

Code

server.js

var express = require('express');
var cors = require('cors');
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var app = express();

var schema = new Schema({
    user: [
        {
            username: String,
            password: String,
            email: String,
        }
    ]

}, {
    collection: 'users'
});

var Model = mongoose.model('Model', schema);
mongoose.connect('mongodb://localhost:27017/dbName');

app.use(bodyParser.urlencoded({
    extended:true
}));

app.use(bodyParser.json());

app.post("/register", function(request, response){
   var username = request.body.username;
   var password = request.body.password;
   var email = request.body.email;
   console.log("Post Received: %s %s %s", username, password, email);
});

var port = process.env.API_PORT || 3000;
// app.use('/api', router);
app.listen(port, function(){
    console.log("Running on port 3000")
})

RegisterModal.js

import React, { Component } from 'react';

class RegisterModal extends Component
{
    render() {
        return(
            <div>
                <form method="post" action="/register">
                    Email Address:<br/>
                    <input type="text" name="email"/><br/>
                    Username:<br/>
                    <input type="text" name="username"/><br/>
                    Password:<br/>
                    <input type="password" name="password"/><br/>
                    <input type="submit" value="Register"/>
                </form>
             </div>
        );
    }
}

export default RegisterModal;

Answer 1

Your code looks fine.

Actually, I copy pasted it and I can run it without issue.

Are you sure that:

• You have restarted your node process (to include changes made to server.js)?
• The node process is listening on the same domain/port as the HTML page is loaded from?