Why is this form submitting two times

Question

So I have a form made with reactjs and a restapi on express to which I'm sending post request from the Confirm page. The main question is why this form is submitting two times? And also it is submitting when I'm pressing next from previous page and not when I'm pressing the submit button on the confirm page.

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 => {
        this.setState({ [input]: e.target.value });
    }

    // MAKING POST REQUEST TO THE API
    formHandler = () => {
        const valuesToSubmit = {
            email: this.state.email,
            password: this.state.password,
            confirmPassword: this.state.confirmPassword,
            twitter: this.state.twitter,
            facebook: this.state.facebook,
            googlePlus: this.state.googlePlus,
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            phone: this.state.phone,
            adress: this.state.adress
        }
        console.log('Form:')
        console.log(valuesToSubmit)
        axios.post('http://localhost:9000/api', valuesToSubmit)
            .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.valuesToSubmit)}
                    />
                )
            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="button" name="submit" className="submit action-button" value="Submit" />
                </fieldset>
            </form>
        );
    }
}


export default Confirm;

Answer 1

In this block...

            case 4:
            return (
                <Confirm
                    nextStep={this.nextStep}
                    prevStep={this.prevStep}
                    values={values}
                    handleChange={this.handleChange}
                    formHandler={this.formHandler(this.state.valuesToSubmit)}
                />
            )

You've got a function call happening there. You just want to pass the function definition to this prop, not call it when it's evaluated. So change that line to:

formHandler={this.formHandler}

No need to pass the state as the param there because formHandler is already reading this.state to do its work.