title: UPDATED: Express.js req.body is an empty object & req.body.name is undefined
body: <p>I am not sure what I'm doing wrong here, but I'm not getting anything from <code>req.body</code> or <code>req.body.name</code>.  I'm just trying to get text from an input field in a React component.  Here's my <code>POST</code> request:</p>
  
  <pre><code>    //posting notes to backend and storing in db
  module.exports = (app,bodyparser,mongoUrl) =&gt; {
  
  
      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);
  
      });
  
  }
  </code></pre>
  
  <p>And my React Component: </p>
  
  <pre><code>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 (
          &lt;div id="form-container" className='container-fluid' style={defaultStyle}&gt;
            &lt;div id="form"&gt;
              &lt;div className="form-group"&gt;
              &lt;form action="/notes" method="POST" encType="multipart/form-data"&gt;
                &lt;label htmlFor="newNote"&gt;New Note:&lt;/label&gt;
                  &lt;input type="text" name="name" className="form-control" rows="5" id="newNote" placeholder="Write your note here..."&gt;&lt;/input&gt;
                  &lt;button id="done" type="submit" className="btn btn-primary pull-right"&gt;Done&lt;/button&gt;
                  &lt;button id="cancel" className="btn btn-warning pull-right"&gt;Cancel&lt;/button&gt;
              &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )
      }
  
  }
  </code></pre>
  
  <p>And my <code>package.json</code> file:</p>
  
  <pre><code>{
    "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\" &amp;&amp; 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"
    }
  }
  </code></pre>
  
  <p>This is my <code>server.js</code> file where I've required the <code>body-parser</code> module:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>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: <a href="https://github.com/CandiW/Quick-Notes-App" rel="nofollow noreferrer">Quick-Notes-App</a> </p>
  
  <p><strong>Update 5/2/2018:</strong></p>
  
  <p>I have made some changes to how I'm using <code>body-parser</code> and how I'm using it in my <code>POST</code> request (I've updated the original code samples I attached).  At this point, I'm still receiving the same <code>text: null</code> when I return the array of docs from my database and when I console.log <code>req.body</code> its still an empty object.  Wondering if anyone has any thoughts on if React.js is the issue?  For example, we have to use <code>className</code> instead of <code>class</code> 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.</p>
  
  <p><strong>Update 2 - 5/2/2018</strong></p>
  
  <p>For anyone who might find this useful, I found <a href="https://hackernoon.com/how-to-combine-a-nodejs-back-end-with-a-reactjs-front-end-app-ea9b24715032" rel="nofollow noreferrer">this Medium article</a> 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.</p>