I am developing a stepper form. I'm interested in solving a problem but also understand if my design is correct. My idea is to wrap each form page in a form container and cycle trough each step. In addition to this i'm wrapping my each form page (i.e. ) in a formik container in order to validate the fields. The problem I am facing right now is that I am not able to pass the new Formik props when I switch the page.

class Form extends Component {

    state = {
        step: 1,
    };

    nextStep = () => {
        const { step } = this.state;
        this.setState({
            step: step   1
        })
    }

    prevStep = () => {
        const { step } = this.state;
        this.setState({
            step: step - 1
        })
    }

    render() {
        const {
            step,
        } = this.state;

        switch (step) {
            case 1:
                return (
                    <>
                        <Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
                            <Stepper
                                steps={[{ label: "" }, { label: "" }, { label: "" }, { label: "" }]}
                                activeStep={0}
                                styleConfig={stepperStyle}
                                className={'stepper'}
                                stepClassName={'stepper__step'}
                            />
                            <Formik
                                initialValues={{
                                    firstName: '',
                                    lastName: '',
                                    gender: '',
                                    DOB: '',
                                    tax_code: '',
                                    zip: '',
                                    district: [{ nome: null, sigla: null, regione: null }],
                                    country: '',
                                    city_birth: ''
                                }}
                                onSubmit={values => {
                                    //alert(JSON.stringify(values, null, 2))
                                    //Axios POST
                                    this.nextStep()
                                }}

                                validationSchema={validationSchemaRegistration}
                            >
                                {(formik) => <LeadRegistration
                                    nextStep={this.nextStep}
                                    prevStep={this.prevStep}
                                    formik={formik}
                                    onSubmit={formik.handleSubmit}
                                />}
                            </Formik>
                        </Paper>
                    </>
                )
            case 2:
                return (
                    <Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
                        <Stepper
                            steps={[{ label: "" }, { label: "" }, { label: "" }, { label: "" }]}
                            activeStep={1}
                            styleConfig={stepperStyle}
                            className={'stepper'}
                            stepClassName={'stepper__step'}
                        />
                        <Formik
                            initialValues={{
                                isItalianCitizen: true,
                                isAddressFiscal: false
                            }}
                            onSubmit={values => {

                            }}
                            validationSchema={
                                ''
                            }>
                            {(formik) => <LeadPersonalDetails
                                nextStep={this.nextStep}
                                prevStep={this.prevStep}
                                handleChange={this.handleChange}
                                formik={formik}
                            />}
                        </Formik>
                    </Paper >
                )
            case 3:
                return (
                    <Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
                        <Stepper
                            steps={[{ label: "" }, { label: "" }, { label: "" }, { label: "" }]}
                            activeStep={2}
                            styleConfig={stepperStyle}
                            className={'stepper'}
                            stepClassName={'stepper__step'}
                        />
                        <Formik
                            initialValues={{ example: "example" }}
                            onSubmit={values => {

                            }}
                            validationSchema={
                                ''
                            }>
                            <LeadPersonalContacts
                                nextStep={this.nextStep}
                                prevStep={this.prevStep}
                                handleChange={this.handleChange}
                            />
                        </Formik>
                    </Paper>
                )
            case 4:
                return (
                    <Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
                        <Stepper
                            steps={[{ label: "" }, { label: "" }, { label: "" }, { label: "" }]}
                            activeStep={3}
                            styleConfig={stepperStyle}
                            className={'stepper'}
                            stepClassName={'stepper__step'}
                        />
                        <Formik
                            initialValues={{ example: "example" }}
                            onSubmit={values => {

                            }}
                            validationSchema={
                                ''
                            }>
                            <LeadPersonalStatus
                                nextStep={this.nextStep}
                                prevStep={this.prevStep}
                                handleChange={this.handleChange}
                            />
                        </Formik>
                    </Paper>
                )
            default: return null
        }
    }



}

export default Form;

CodePudding user response：

I would say a few things before start answering your problem:

You should start to get rid off Class Components, since 2018 we've functional components with Hooks :)

Second, never ever put a switch inside the return. For ur problem, I would do subcomponents and not in the same page. Also, if it's not mandatory to use Formik, u can try React-hook-forms. It's more or less the same, but more powerfull