Send JSON data to server from react without rerender the page

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);
  })
}

/*...*/