Inserting object instead of string in MySQL in React/Express - mysql

Question

I'm having troubles inserting data to MySQL from Express API Server, I'm getting the data from my React Client. I have 4 fields and one of them is not inserting correctly, you can see it in the below screen (the last 3 rows).
This is my client (React) code.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {datos: {}};
this.onSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e){
e.preventDefault();
var self = this;
// On submit of the form, send a POST request with the data to the server.
fetch('/todo/meterla',{
method: 'POST',
data:{
task: self.refs.task
}
})
.then(function(response){
return response.json()
}).then(function(body){
console.log(body);
});
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<form onSubmit={this.onSubmit}>
<input type="text" placeholder="TASK" ref="task"/>
<input type="submit"/>
</form>
</div>
);
}
}
export default App;
This is mi server code:
// Add a new todo
app.post('/todo/meterla', function (req, res) {
var task = req.body;
var query = mc.query("INSERT INTO tasks SET ? ", { task: task }, function (error, results, fields) {
});
});

Answer 1

In the client code, change data to body in the onSubmit handler:
fetch('/todo/meterla',{
method: 'POST',
body:{
task: self.refs.task
}
})
In the server code, change this line var task = req.body; to var task = req.body.task;.