MERN Stack: Saving Form Data to mLab - Formatting Issue - forms

Question

I am getting the data from my form to my mLab but it is formatted in a way i don't like. it comes though like this
{ '{"email":"ben#benjamin.com","message":"not what i want"}': '' }
and even worse it saves as this
"data": "{\"{\\\"email\\\":\\\"ben#benjamin.com\\\",\\\"message\\\":\\\"this is ridiculous\\\"}\":\"\"}"
so it is setting my data as the key to nothing basically. i resorted to changing my Schema to an Object just so i can save something. ideally i want a key for each piece of data. and i want to be able to access it later. i couldn't get body parser to work so i am using express-formidable as middleware. there are alot of moving parts and if i change things around i crash the server and get error no matter what i do. okay here is some of the code from both sides.
SERVER CODE:
var formSchema = new Schema({
data: Object
})
app.use(formidable());
app.post('/contact', function(req,res,next){
console.log(req.fields)
var item = JSON.stringify(req.fields)
var form = new Form({data: item
}).save(function(err,data){
if(err) throw err
if(data) res.json(data)
})
})
CLIENT SIDE CODE
submitData(e){
e.preventDefault();
let email = this.state.value;
let msg = this.state.value2;
let data = {
email: email,
message: msg
}
fetch('/contact', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
},
body: JSON.stringify(data)
})
.then((response) => response.json())
.then((responseData) => {
console.log("Response:",responseData);
this.setState({
value: "",
value2: "",
status: "THANKS FOR CONTACTING ME I'LL BE IN TOUCH SOON"
})
}).catch((error) => {
console.log(error)
})
}
this is driving me insane. ideally i would like to do it right. or somehow access the object and get at the email and message keys and just change my Schema. then i could assign the keys in my new Form(... section

Answer 1

In a bizarre twist of events i solved it sort of. this can't be the best way but it works. i would still like to know where along the line i went wrong. i saw a tutorial where the form data was easily saved...granted in wasn't from a react front end...anyway this is what i did
My Custom Solution
var formSchema = new Schema({
email: String,
message: String
})
app.use(urlencodedParser);
app.post('/contact', function(req,res,next){
var item = Object.keys(req.body)
var o = JSON.parse(item[0])
var e = o.email
var m = o.message
console.log(e)
//var item = JSON.stringify(req.fields)
var form = new Form({email: e,message: m
}).save(function(err,data){
if(err) throw err
if(data) res.json(data)
})
})
i switched back to body-parser from formidable but either way i was getting that weird object
i still don't know why my data object was {'{'key':'value'}':''} i thought my problem was on the server side...but maybe it is something with how i send the POST. someone smarter and more experienced isnt hard to find :)