React form using Axios post

Question

I've been searching the internet for days and cannot seem to find anything related to submitting a form request through React and using Axios post to input the information to our REST API. Every time we submit our register form every value comes up undefined. Is this the best way to have React communicate with our REST API? Also we have tested the API using Postman and know it's working.

var React = require('react');

var Access = React.createClass({
    getInitialState: function() {
        return {
            firstName: '',
            lastName: '',
            email: '',
            password1: ''
        }
    },

    handleSubmit: function(e) {
        var _this = this;
        this.serverRequest = axios
        console.log(_this.ref.firstName)
        .post("/api/Users", {
            userFirstName: _this.ref.firstName,
            userLastName: _this.ref.lastName,
            userEmail: _this.ref.email,
            userPassword: _this.ref.password1
        })
        .then(function(response) {
            console.log(response);
        }) .catch(function (error) {
            console.log(error);
        });
    },

    render: function() {
        return(
            <div>
                <section className="access">
                    <div className="row center-xs container">
                        <div className="col-xs-12 col-sm-4 sign-in">
                            <h1>Sign-In</h1>
                            <form action="/" method="get">
                                <label htmlFor="email">Email</label>
                                <input type="email" name="email" placeholder="Email"/>
                                <label htmlFor="password">Password</label>
                                <input type="password" name="password" placeholder="Password"/>
                                <input className="button pink" type="submit" value="Sign-In"/>
                                <br/>
                                <input type="checkbox" name="RememberMe"/>
                                <label htmlFor="RememberMe">Remember me</label>
                                <span> | <a href="/">Forgot password?</a></span>
                            </form>
                        </div>
                        <div className="col-xs-12 col-sm-4 register">
                            <h1>Register</h1>
                            <form onSubmit={this.onSubmit}>
                                <label htmlFor="firstName">First Name</label>
                                <input type="text" name="firstName" placeholder="First Name" ref="firstName"/>
                                <label htmlFor="lastName">Last Name</label>
                                <input type="text" name="lastName" placeholder="Last Name" ref="lastName"/>
                                <label htmlFor="email">Email</label>
                                <input type="email" name="email" placeholder="Email" ref="email"/>
                                <label htmlFor="password1">Password</label>
                                <input type="password" name="password1" placeholder="Password" ref="password1"/>
                                <label htmlFor="password2">Re-enter Password</label>
                                <input type="password" name="password2" placeholder="Password"/>
                                <input className="button gold" type="submit" value="Register"/>
                            </form>
                        </div>
                    </div>
                </section>
            </div>
        );
    }
});

module.exports = Access;

Shubham Khatri · Answer 1 · 2017-04-06T12:52:39.493

It happens because you access the refs with _this.ref.firstName and not _this.refs.firstName

Also you should not be using string refs any longer. Rather follow the callback approach, as recommended by the react docs

var Access = React.createClass({
    getInitialState: function() {
        return {
            firstName: '',
            lastName: '',
            email: '',
            password1: ''
        }
    },

    handleSubmit: function(e) {
        var _this = this;

        console.log(_this.firstName);
        this.serverRequest = axios
        .post("/api/Users", {
            userFirstName: _this.firstName,
            userLastName: _this.lastName,
            userEmail: _this.email,
            userPassword: _this.password1
        })
        .then(function(response) {
            console.log(response);
        }) .catch(function (error) {
            console.log(error);
        });
    },

    render: function() {
        return(
            <div>
                <section className="access">
                    <div className="row center-xs container">
                        <div className="col-xs-12 col-sm-4 sign-in">
                            <h1>Sign-In</h1>
                            <form action="/" method="get">
                                <label htmlFor="email">Email</label>
                                <input type="email" name="email" placeholder="Email"/>
                                <label htmlFor="password">Password</label>
                                <input type="password" name="password" placeholder="Password"/>
                                <input className="button pink" type="submit" value="Sign-In"/>
                                <br/>
                                <input type="checkbox" name="RememberMe"/>
                                <label htmlFor="RememberMe">Remember me</label>
                                <span> | <a href="/">Forgot password?</a></span>
                            </form>
                        </div>
                        <div className="col-xs-12 col-sm-4 register">
                            <h1>Register</h1>
                            <form onSubmit={this.onSubmit}>
                                <label htmlFor="firstName">First Name</label>
                                <input type="text" name="firstName" placeholder="First Name" ref={firstName => this.firstName = firstName}/>
                                <label htmlFor="lastName">Last Name</label>
                                <input type="text" name="lastName" placeholder="Last Name" ref={lastName => this.lastName = lastName}/>
                                <label htmlFor="email">Email</label>
                                <input type="email" name="email" placeholder="Email" ref={email => this.email = email}/>
                                <label htmlFor="password1">Password</label>
                                <input type="password" name="password1" placeholder="Password" ref={password1 => this.password1 = password1}/>
                                <label htmlFor="password2">Re-enter Password</label>
                                <input type="password" name="password2" placeholder="Password"/>
                                <input className="button gold" type="submit" value="Register"/>
                            </form>
                        </div>
                    </div>
                </section>
            </div>
        );
    }
});

Hey Shubham, Thanks for the response. I've tried your suggestion, but for some reason we continue to get the below error and all of our values are 'undefined' { "code": "ER_BAD_NULL_ERROR", "errno": 1048, "sqlState": "23000", "index": 0 } — Matthew Farlymn, Apr 06 '17 at 11:40
I think you had placed you `console.log(_this.firstName)` statment at the wrong place in handleSubmit. Try the soltion now. Also do you get the response on console.log(_this.firstName). Also see this http://stackoverflow.com/questions/17648179/sqlstate23000-integrity-constraint-violation-1452-cannot-add-or-update-a-chi for sql error — Shubham Khatri, Apr 06 '17 at 12:54
Updated my code and I don't get any console.log when I select register. It also looks like that error is because we had our userFirstName value unable to be null and since we are getting undefined for all of our columns it would error out. Nothing seems to console.log. — Matthew Farlymn, Apr 06 '17 at 13:11
Probably you also need a e.preventDefault() statement right at the top of handleSubmit function — Shubham Khatri, Apr 06 '17 at 13:14
UPDATE** since allowing the userFirstName to be null when I submit the register form a new row is created in the database, but is completely empty. So for some reason none of my form values are being sent through, but the post function is working. — Matthew Farlymn, Apr 06 '17 at 13:18
After adding e.preventDefault , you should be able to get the values — Shubham Khatri, Apr 06 '17 at 13:19
That doesn't seem to work. This is what my console looks like if that helps: inside service undefined undefined undefined undefined Connected to the DB POST /api/Users 200 40.808 ms - 128 — Matthew Farlymn, Apr 06 '17 at 14:14

score 2 · Answer 2 · answered Apr 06 '17 at 10:04

This is not the best practice!.React use the ref callback to store a reference to the text input DOM. like ref={(input) => { this.textInput = input; }}. Anyway the issue is that you used ref instead of refs.

The most recommend way is ....

var React = require('react');

    var Access = React.createClass({
        getInitialState: function() {
            return {
                firstName: '',
                lastName: '',
                email: '',
                password1: ''
            }
        },

        handleSubmit: function(e) {
            var _this = this;
            this.serverRequest = axios
            console.log(_this.ref.firstName)
            .post("/api/Users", {
                userFirstName: this.firstName.value,
                userLastName: this.lastName.value,
                userEmail: this.email.value,
                userPassword: this.password1.value
            })
            .then(function(response) {
                console.log(response);
            }) .catch(function (error) {
                console.log(error);
            });
        },

        render: function() {
            return(
                <div>
                    <section className="access">
                        <div className="row center-xs container">
                            <div className="col-xs-12 col-sm-4 sign-in">
                                <h1>Sign-In</h1>
                                <form action="/" method="get">
                                    <label htmlFor="email">Email</label>
                                    <input type="email" name="email" placeholder="Email"/>
                                    <label htmlFor="password">Password</label>
                                    <input type="password" name="password" placeholder="Password"/>
                                    <input className="button pink" type="submit" value="Sign-In"/>
                                    <br/>
                                    <input type="checkbox" name="RememberMe"/>
                                    <label htmlFor="RememberMe">Remember me</label>
                                    <span> | <a href="/">Forgot password?</a></span>
                                </form>
                            </div>
                            <div className="col-xs-12 col-sm-4 register">
                                <h1>Register</h1>
                                <form onSubmit={this.onSubmit}>
                                    <label htmlFor="firstName">First Name</label>
                                    <input type="text" name="firstName" placeholder="First Name" ref={(input) => { this.firstName = input; }}/>
                                    <label htmlFor="lastName">Last Name</label>
                                    <input type="text" name="lastName" placeholder="Last Name" ref={(input) => { this.lastName = input; }}/>
                                    <label htmlFor="email">Email</label>
                                    <input type="email" name="email" placeholder="Email" ref={(input) => { this.email = input; }}/>
                                    <label htmlFor="password1">Password</label>
                                    <input type="password" name="password1" placeholder="Password" ref={(input) => { this.password1 = input; }}/>
                                    <label htmlFor="password2">Re-enter Password</label>
                                    <input type="password" name="password2" placeholder="Password"/>
                                    <input className="button gold" type="submit" value="Register"/>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            );
        }

Hey TRomesh, Thanks for the response. I've tried your suggestion, but for some reason we continue to get the below error and all of our values are 'undefined' { "code": "ER_BAD_NULL_ERROR", "errno": 1048, "sqlState": "23000", "index": 0 } — Matthew Farlymn, Apr 06 '17 at 11:41
@MatthewFarlymn it seems like you are using a sql database and usually sqlState:23000 stands for duplicate keys in table. that might be the case. — TRomesh, Apr 06 '17 at 12:45

score 2 · Answer 3 · answered Dec 04 '17 at 12:55

2

Not sure if I'm missing something, but in your form you say onSubmit={this.onSubmit} while your method is called handleSubmit.

answered Dec 04 '17 at 12:55

Kenny

571
5
18

React form using Axios post

3 Answers3