How to do POST in FORM Submit using reactjs and pass the object value into REST service?

Question

I have created a login page using reactjs, when I send my user input/password through a post method rest api call to authenticate I am receiving an error. Can somebody help me on whats going wrong here please!!

I guess this is because I am unable to send username and password strings in a json format.

This is the error,

<br />
<b>Notice</b>: Undefined variable: error in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>27</b><br />
<br />
<b>Notice</b>: Undefined variable: id in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>29</b><br />
<br />
<b>Notice</b>: Undefined variable: error in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>29</b><br />
{"code":"INVALID_JSON_INPUT","message":"Error decoding JSON input"}

This is my app.js file,

    import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

export default class App extends Component {

    render() {
        return (
            <div className="App">
                <div className="App-header"></div>
                <form
                    id="main-login"
                    action="http://don.healthedata.com/admin/login"
                    method="post">
                    <h2>
                        Admin UI Login
                    </h2>
                    <label>
                        <span class="text">user:</span>
                        <input type="email" name="email"/><br/>
                    </label>
                    <br/>
                    <label>
                        <span class="text">password:</span>
                        <input type="password" name="password"/><br/>
                    </label><br/>
                    <div class="align-right">
                        <button type="submit">Submit</button>
                    </div>
                </form>

            </div>

        );
    }

}

Solution:
Modified and working App.js file:

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

export default class App extends Component {

    constructor(props, context) {
        super(props, context);

        this.state = { description: '' };
    }

    onChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    onSubmit(e) {
        e.preventDefault();

        fetch(this.props.formAction, {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({description: this.state.description})
        });

        this.setState({description: ''});
    }

    render() {
        return (
            <div className="App">
                <form
                    id="main-login"
                    action={this.props.action}
                    method={this.props.method}
                    onSubmit={this.onSubmit}>
                    <h2>Admin UI Login</h2>
                    <label>
                        <span class="text">user:</span>
                        <input type="email" name="email"/><br/>
                    </label>
                    <br/>
                    <label>
                        <span class="text">password:</span>
                        <input type="password" name="password"/><br/>
                    </label>
                    <br/>
                    <div class="align-right">
                        <button>Submit</button>
                    </div>
                </form>
            </div>
        );
    }

}

// App.propTypes = { action: React.PropTypes.string.isRequired, method: React.PropTypes.string}
App.defaultProps = {
    action: 'http://don.healthedata.com/admin/login',
    method: 'post'
};

module.exports = App;

When I provide user input/password and hit submit, nothing is happening.

Answer 1

You're right, you are getting this error:

{"code":"INVALID_JSON_INPUT","message":"Error decoding JSON input"}

It means that you are not sending the data as JSON format. You need to process the information that you get from the form, create a JSON object and then send it through a POST request.

You can do that with the onSubmit property of the form. Handle the data from the form to a new function and then I suggest using fetch to send the POST