更新：Express.js req.body是一个空对象＆req.body.name未定义

Question

I am not sure what I'm doing wrong here, but I'm not getting anything from req.body or req.body.name . I'm just trying to get text from an input field in a React component. Here's my POST request:

    //posting notes to backend and storing in db
module.exports = (app,bodyparser,mongoUrl) => {


    let MongoDB = require('mongodb').MongoClient;
    app.use(bodyparser.urlencoded({extended: false}));
    app.use(bodyparser.json());

    app.post('/notes',function(req,res){
        //posting the note just fine, just not receiving the note text (says undefined)
        //not getting note text for some reason?? only returning the date...

        //send response to append note to page
        //store note data in db

        let noteData = {
            text: req.body.name,
            date: new Date().toDateString()
        };
        console.log(req.body);
        MongoDB.connect(mongoUrl,function(err,db){

                let notesCollection = db.collection('notes');
                notesCollection.insert(noteData);
                db.close();
        });

        res.status(201).send(noteData);

    });

}

And my React Component:

class NewNote extends Component {
//this is for creating a new note only
//need post request for this one
//need to clear textarea upon submit or cancel
    render(){
      return (
        <div id="form-container" className='container-fluid' style={defaultStyle}>
          <div id="form">
            <div className="form-group">
            <form action="/notes" method="POST" encType="multipart/form-data">
              <label htmlFor="newNote">New Note:</label>
                <input type="text" name="name" className="form-control" rows="5" id="newNote" placeholder="Write your note here..."></input>
                <button id="done" type="submit" className="btn btn-primary pull-right">Done</button>
                <button id="cancel" className="btn btn-warning pull-right">Cancel</button>
            </form>
            </div>
          </div>
        </div>
      )
    }

}

And my package.json file:

{
  "name": "quick-notes-app",
  "version": "1.0.0",
  "description": "my first full-stack javascript app",
  "main": "./routes/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --exec babel-node ./routes/server.js --ignore public/",
    "dev": "webpack -wd",
    "lint": "eslint ./"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/CandiW/quick-notes-app.git"
  },
  "author": "CandiW",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/CandiW/quick-notes-app/issues"
  },
  "homepage": "https://github.com/CandiW/quick-notes-app#readme",
  "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.3",
    "mongodb": "^2.2.35",
    "randomcolor": "^0.5.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.7.0",
    "nodemon": "^1.17.3",
    "webpack": "^3.11.0"
  }
}

This is my server.js file where I've required the body-parser module:

const express = require('express');
const path = require('path');
const bodyparser = require('body-parser');
const notes = require('./notes.js');
const myNotes = require('./mynotes.js');
const mongodb = require('mongodb');
const MongoClient = mongodb.MongoClient;

let app = express();
let database = "mongodb://localhost:3000/";

    app.use(express.static('public'));
    app.use(bodyparser.urlencoded({extended: true}));
    app.use(bodyparser.json());

function quickNotesApp(port){
    // eslint-disable-next-line no-console
    console.log("listening on port " + port);

    notes(app,bodyparser,database);
    myNotes(app,bodyparser,database);

    app.listen(port);

}

quickNotesApp(3000);

Please excuse my comments in the code :) I'm using them to keep track of my to-do's and what each component does. You all can see my github repo for my app here: Quick-Notes-App

Update 5/2/2018:

I have made some changes to how I'm using body-parser and how I'm using it in my POST request (I've updated the original code samples I attached). At this point, I'm still receiving the same text: null when I return the array of docs from my database and when I console.log req.body its still an empty object. Wondering if anyone has any thoughts on if React.js is the issue? For example, we have to use className instead of class in our React Components. I'm not finding anything readily to answer that question. I have also uninstalled and reinstalled express, body-parser, and all the rest of my dependencies to no avail.

Update 2 - 5/2/2018

For anyone who might find this useful, I found this Medium article on how to combine a Node.js backend with a React.js frontend. I think I'm going to try this out and see if it helps.

Answer 1

npm i --save body-parser
const body_parser = require('body-parser');
app.use(body_parser.json());
app.use(body_parser.urlencoded({extended: true}));

Answer 2

Add this also app.use(bodyParser.json());

const express = require('express');
const path = require('path');
const notes = require('./notes.js');
const myNotes = require('./mynotes.js');
const bodyparser = require('body-parser');
const mongodb = require('mongodb');
const MongoClient = mongodb.MongoClient;

let app = express();
let database = "mongodb://localhost:3000/";
app.use(bodyparser.urlencoded({extended: true}));
app.use(bodyparser.json());

function quickNotesApp(port){
    // eslint-disable-next-line no-console
    console.log("listening on port " + port);
    app.use(express.static('public'));


    notes(app,database);
    myNotes(app,database);

    app.listen(port);

}

quickNotesApp(3000);