Why is it showing undefined, if handleChange itself has values

Question

I'm trying to make a post request with the completed fields to the restapi, there are the parent component, in which I have my handleChange and formHandler. Below that is the child component, when I press submit it should make a post request with all the user data. First of all it's trying to make the post request before I press submit button, it's making it when I press continue from PersonalDetails to Confirm. So the question is why I get undefined from console logs and if someone could explain me how to make this post request to work would've been really nice.

import React, { Component } from 'react';
import StepOne from './StepOne';
import SocilaProfiles from './SocialProfiles'
import PersonalDetails from './PersonalDetails';
import Confirm from './Confirm';
import Success from './Success';
import axios from 'axios';

export class UserForm extends Component {
    state = {
        step: 1,
        email: '',
        password: '',
        confirmPassword: '',
        twitter: '',
        facebook: '',
        googlePlus: '',
        firstName: '',
        lastName: '',
        phone: '',
        adress: ''
    }

    // Proceed to next step
    nextStep = () => {
        const { step } = this.state;
        this.setState({
            step: step + 1
        });
    }

    // Go back to prev step
    prevStep = () => {
        const { step } = this.state;
        this.setState({
            step: step - 1
        });
    }

    // Handle fields change
    handleChange = input => e => {
        let formFields = this.setState({ [input]: e.target.value });
    }

    // MAKING POST REQUEST TO THE API
    formHandler(formFields) {
        console.log('Form:')
        console.log(this.formFields)
        axios.post('/api', this.formFields)
            .then(function (response) {
                console.log(response);
                //Perform action based on response
            })
            .catch(function (error) {
                console.log(error);
                //Perform action based on error
            });
    }


    render() {
        const { step } = this.state;
        const { email, password, confirmPassword, twitter, facebook, googlePlus, firstName, lastName, phone, adress } = this.state;
        const values = { email, password, confirmPassword, twitter, facebook, googlePlus, firstName, lastName, phone, adress };

        switch (step) {
            case 1:
                return (
                    <StepOne
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        values={values}
                    />
                )
            case 2:
                return (
                    <SocilaProfiles
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        values={values}
                        prevStep={this.prevStep}
                    />
                )
            case 3:
                return (
                    <PersonalDetails
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        prevStep={this.prevStep}
                        values={values}
                    />
                )
            case 4:
                return (
                    <Confirm
                        nextStep={this.nextStep}
                        prevStep={this.prevStep}
                        values={values}
                        handleChange={this.handleChange}
                        formHandler={this.formHandler(this.state.formFields)}
                    />
                )
            case 5:
                return <Success />
                
        }
    }
}

export default UserForm;

import React, { Component } from 'react';
import '../index.css';

export class Confirm extends Component {
    continue = e => {
        e.preventDefault();
        // PROCESS FORM -> SEND DATA TO API(EXPRESS)
        this.props.nextStep();
    }

    submit = e => {
        e.preventDefault();
        this.props.formHandler();
    }

    back = e => {
        e.preventDefault();
        this.props.prevStep();
    }

    render() {
        const { values: { email, password, confirmPassword, twitter, facebook, googlePlus, firstName, lastName, phone, adress }} = this.props;

        return (
            <form onSubmit={this.submit} className="msform">

                <fieldset>
                    <h2 className="fs-title"> Confirm Details </h2>
                    <hr/>
                    <ul className="theList">
                        <li> <strong>Email:</strong> {email} </li>
                        <li> <strong>Twitter:</strong> {twitter} </li>
                        <li> <strong>Facebook:</strong> {facebook} </li>
                        <li> <strong>Google Plus:</strong> {googlePlus} </li>
                        <li> <strong>First Name:</strong> {firstName} </li>
                        <li> <strong>Last Name:</strong> {lastName} </li>
                        <li> <strong>Phone:</strong> {phone} </li>
                        <li> <strong>Adress:</strong> {adress}</li>
                    </ul>
                    <input onClick={this.back} type="button" className="previous action-button" value="Previous" />
                    <input onClick={this.continue} type="submit" name="submit" className="submit action-button" value="Submit" />
                </fieldset>
            </form>
        );
    }
}


export default Confirm;

score 0 · Accepted Answer · answered Jul 25 '20 at 09:03

Anytime you have a button of type "submit" in a form (or one that does not specifically say that its type is NOT "submit" by specifying a type of "button"), the browser is going to view its click as the user wanting to submit the form. So the answer for your first question is simply to add type="button" to your continue button, instead of "submit".

You wrote a form handler override that tried to prevent the above, I don't see an obvious reason why it wasn't preventing it, actually.

Secondly, you seem to be trying to call your submit function by referencing this.state.formFields. However that does not exist in your state. When you update your inputs, you are using this function:

    // Handle fields change
    handleChange = input => e => {
        let formFields = this.setState({ [input]: e.target.value });
    }

That setState call does not return values, it is a setter. You are setting an individual piece of your state (say, "name" equal to "John Doe") And even if it did, your formFields would go nowhere.

Instead, in your submit function, you'll want to just pull the pieces out of state that you are interested in. For instance,

const valuesToSubmit =  {
    name: this.state.name,
    email: this.state.email,
}
axios.post('/api', valuesToSubmit)
...

Why is it showing undefined, if handleChange itself has values

1 Answers1