title: Why am I unable to post data to mongodb?
body: <p>I have been playing with React for days now and while I like the frontend aspects of it, I am having a considerable time getting a mongodb backend to work and am still unable to get my form data posted onto mongodb. I've read through many tutorials and I need some help as to why I can't just ajax request onto mongo.</p>
  
  <p>Here are the tutorials I've attempted to follow along:</p>
  
  <ul>
  <li><a href="https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app" rel="nofollow noreferrer">Scoth IO React backend tutorial</a></li>
  <li><a href="https://github.com/reactjs/react-router-tutorial" rel="nofollow noreferrer">React Router Server tutorial</a></li>
  <li><a href="https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/" rel="nofollow noreferrer">Get React working with an API server</a></li>
  <li><a href="https://www.youtube.com/watch?v=ZKwrOXl5TDI" rel="nofollow noreferrer">Express With Node Youtube tutorial</a></li>
  </ul>
  
  <p>And I have posted my problem before (twice) <a href="https://stackoverflow.com/questions/40772911/how-can-i-submit-this-form-data-to-mongodb-correctly?noredirect=1#comment68770518_40772911">How to post data to mongodb from a contact form</a></p>
  
  <p>I didn't receive an answer but the following comment on it helped me along. Here is the comment.</p>
  
  <blockquote>
    <p>instead of using form method, use ajax, like fetch for instance, and send a POST request to your express route </p>
  </blockquote>
  
  <p>The general consensus around the answer, and comments from my previous question direct me towards the youtube video tutorial. That is what I've been trying to do but I can't get it to work due to a number of errors. (I'll list below). The tutorials also don't help too much because they are pretty much too different to implement.</p>
  
  <p>As to the actual code, here is my <code>src/modules/contact.js</code> file:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Formsy from 'formsy-react';
  import { FormsyText } from 'formsy-material-ui/lib';
  import Paper from 'material-ui/Paper';
  import RaisedButton from 'material-ui/RaisedButton';
  import Snackbar from 'material-ui/Snackbar';
  import '../assets/css/style.css';
  
  class ContactForm extends Component {
    constructor(props) {
      super(props);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = { open: false };
    }
  
    handleSubmit(data) {
  
       #########PROBLEM#########
       .....how am I suppose to use .fetch to an express route
             and post to mongo here?...................
       ##########################
    }
  
    handleTouchTap = () =&gt; {
      this.setState({ open: true });
    }
  
    handleRequestClose = () =&gt; {
      this.setState({ open: false });
    }
  
    render() {
      return(
        &lt;div&gt;
          &lt;Paper className="Form" zDepth={2}&gt;
            &lt;Formsy.Form onSubmit={this.handleSubmit} &gt;
              &lt;FormsyText
                required
                name="name"
                floatingLabelText="Enter your name"
              /&gt;
              &lt;FormsyText required name="email"
                floatingLabelText="Enter your email address"
              /&gt;
              &lt;FormsyText
                required
                name="message"
                floatingLabelText="What can I do for you?"
              /&gt;
              &lt;RaisedButton onTouchTap={this.handleTouchTap}
                 type="submit"
                 label="Submit your message"
                 primary={true}
              /&gt;
              &lt;Snackbar
                open={this.state.open}
                message="Thank your for submitting your message. I'll get back to you as soon as I can!"
                autoHideDuration={2000}
                onRequestClose={this.handleRequestClose}
              /&gt;
            &lt;/Formsy.Form&gt;
          &lt;/Paper&gt;
        &lt;/div&gt;
      );
  </code></pre>
  
  <p>Here is my <code>src/modules/mongo.js</code> file:</p>
  
  <pre><code>const MongoClient = require('mongodb').MongoClient;
  const assert = require('assert');
  const ObjectId = require('mongodb').ObjectID;
  const url = 'mongodb://localhost:27017/danielrubio';
  
  const insertFormData(db, callback) {
     db.collection('contactsubmissions').insertOne( {
        "name": 'Daniel Rubio',
        "message": 'message for you',
        "email": 'abcd@gmail.com'
      }, function(err, result) {
      assert.equal(err, null);
      console.log("Inserted a document into the contact submissions collection.");
      callback();
    });
  };
  
  MongoClient.connect(url, function(err, db) {
    assert.equal(null, err);
    insertDocument(db, function() {
      db.close();
    });
  });
  </code></pre>
  
  <p>My question is how exactly do I get my <code>mongo.js</code> file to talk to my <code>contact.js</code> file?</p>
  
  <p>In <code>mongo.js</code> I have placed at the top of the file:</p>
  
  <pre><code>var express = require('express')
  var app = express()
  
  ......code......
  
  export { app };
  </code></pre>
  
  <p>Then in <code>contact.js</code> when I import <code>app</code> to use the <code>fetch</code> ajax method I get this error when the server starts:</p>
  
  <pre><code>Error in ./~/require_optional/index.js
  Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/require_optional
   @ ./~/require_optional/index.js 2:7-20
  
  Error in ./~/send/index.js
  Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/send
   @ ./~/send/index.js 24:9-22
  
  Error in ./~/resolve-from/index.js
  Module not found: Error: Cannot resolve module 'module' in /Users/drubio/Desktop/react_personal_website/node_modules/resolve-from
   @ ./~/resolve-from/index.js 3:13-30
  
  Error in ./~/mime/mime.js
  Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/mime
   @ ./~/mime/mime.js 2:9-22
  
  Error in ./~/destroy/index.js
  Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/destroy
   @ ./~/destroy/index.js 14:17-30
  </code></pre>
  
  <p>How am I supposed to make the post request to mongo if I can't import the express route onto my <code>contact.js</code> file? I really don't want to start from scratch again and if I can get a concrete example or a resource to a github repo that implements this I would really appreciate it. Everything I've tried so far just doesn't work.</p>
  
  <p>If I am not supposed to do it this way and make a <code>$.ajax</code> request, then how do I specify the parameters to in the <code>$.ajax</code> call to insert in my mongo database?</p>