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.
Here are the tutorials I've attempted to follow along:
- Scoth IO React backend tutorial
- React Router Server tutorial
- Get React working with an API server
- Express With Node Youtube tutorial
And I have posted my problem before (twice) How to post data to mongodb from a contact form
I didn't receive an answer but the following comment on it helped me along. Here is the comment.
instead of using form method, use ajax, like fetch for instance, and send a POST request to your express route
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.
As to the actual code, here is my src/modules/contact.js file:
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 = () => {
this.setState({ open: true });
}
handleRequestClose = () => {
this.setState({ open: false });
}
render() {
return(
<div>
<Paper className="Form" zDepth={2}>
<Formsy.Form onSubmit={this.handleSubmit} >
<FormsyText
required
name="name"
floatingLabelText="Enter your name"
/>
<FormsyText required name="email"
floatingLabelText="Enter your email address"
/>
<FormsyText
required
name="message"
floatingLabelText="What can I do for you?"
/>
<RaisedButton onTouchTap={this.handleTouchTap}
type="submit"
label="Submit your message"
primary={true}
/>
<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}
/>
</Formsy.Form>
</Paper>
</div>
);
Here is my src/modules/mongo.js file:
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();
});
});
My question is how exactly do I get my mongo.js file to talk to my contact.js file?
In mongo.js I have placed at the top of the file:
var express = require('express')
var app = express()
......code......
export { app };
Then in contact.js when I import app to use the fetch ajax method I get this error when the server starts:
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
How am I supposed to make the post request to mongo if I can't import the express route onto my contact.js 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.
If I am not supposed to do it this way and make a $.ajax request, then how do I specify the parameters to in the $.ajax call to insert in my mongo database?
