Send JSON data to server from react without rerender the page - mongodb

Question

I'm a bit new to ReactJS,
I've created a simple form and table, each time I hit the submit the state of the table change with the new data.
I'm using tornado as a backend server and mongodb as my DB.
I'm looking for a way to send the same JSON to the server on a second pipe (without rerendering the page again.)
How can I do it?
---- edit - react component -----
import Re
act from 'react';
export default class Reblaze_Dashboard extends React.Component {
constructor(props) {
super(props);
this.onNewUser = this.onNewUser.bind(this);
this.state = {
data: window.obj,
};
}
onNewUser(e) {
e.preventDefault();
const formData = {};
for (const field in this.refs) {
formData[field] = this.refs[field].value;
}
this.state.data.push(formData);
this.setState({
data: this.state.data,
});
}
render() {
return(
<div>
<h2>Dashboard page</h2>
<form onSubmit={this.onNewUser}>
<div className="form-group">
<label htmlFor="first-name-input">First name:</label>
<input type="text" className="form-control" ref="firstname" id="first-name-input" />
</div>
<div className="form-group">
<label htmlFor="last-name-input">Last name:</label>
<input type="text" className="form-control" ref="lastname" id="last-name-input" />
</div>
<input type="submit" value="Submit" className="btn btn-primary pull-right" />
</form>
<br /><br />
<div className="table-responsive">
<table className="table table-striped table-hover">
<thead>
<tr>
<td><h4>First name</h4></td>
<td><h4>Last name</h4></td>
</tr>
</thead>
<tbody>
{this.state.data.map((line, key) =>
<tr key={key}>
<td>{line.firstname}</td>
<td>{line.lastname}</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
)
}
}

Answer 1

You're submitting form data and immediately updating table without checking if your data reaches the server. This way it is possible to update user view while failing to update the database.
I strongly recommend to use some promise-based HTTP-client like Axios (https://github.com/mzabriskie/axios). Send some request, then wait for the promise resolve, and only after that update your component state.
You need something like this:
import React from 'react';
import axios from 'axios';
/*...*/
onNewUser(e) {
e.preventDefault();
const formData = {};
for (const field in this.refs) {
formData[field] = this.refs[field].value;
}
axios.post('yourApiUrl', formData)
// if request is sent and status is ok, update form and send second request
.then((res) => {
this.state.data.push(formData);
this.setState({
data: this.state.data,
});
return axios.post('yourApiUrl', formData);
})
// if second request is ok, receive a notification
.then((res) => {
console.log('second request is ok');
})
// if there is an error, receive a notification
.catch((err) => {
console.log(err);
})
}
/*...*/