Multi step form throws TypeError entering the last step. WHY?!

[pjotro]

Hey guys,

I'm about to build a form to create customers. There's a bunch of data to type in, why I decided to make it with a Stepper ('@material-ui/core/stepper').
Now the form is dynamic, which means depending on the step a different form page is shown.
For every subform/step I made a new component. I explicitely took care to wrap the <form onSubmit=formik.handleSubmit></form> component just around my Stepper, so the communication with my subForms runs along props and callbacks.

So my plan was to use the "next step"-button from the Stepper as a submit button to cache the subForm entries after every step in my "onSubmit"-function and just in the last step it sends all the data to my API.

I'm not fully finished jet, but there comes this error message everytime I enter the last step:

TypeError: Cannot read property 'company' of undefined
    at C (CustomerStep.js:87)
...

Warning: An unhandled error was caught from submitForm() TypeError: Cannot read property 'company' of undefined
    at C (CustomerStep.js:87)
...

CustomerStep.js:87 is the line where 'value={props.values.company}' is set as a prop to my TextField.

This is very confusing, cause I do not enter the component 'CustomerStep.js' after the first step anymore. And the data out of the subform is written into the 'data'-state in my StepperForm.js, so I really don't get the error.

Here is some of my code:

StepperForm.js

export default function StepperForm() {

    const[data, setData] = React.useState({
        customer: {
            
        },
        contacts: [],
        locations: [],
    });
...
// other states and attributes
...

    const formik = useFormik({
        initialValues: {
            customer: {
                company: "",
                street: "",
                houseNumber: "",
                plz: "",
                location: "",
                country: "",
                homepage: "",
            }
        },
        validationSchema: validation,
        onSubmit: (values) => {
            cacheData(values);
            handleNext();

            //only submit on last step
            if(activeStep === steps.length) {   
                customerToAPI();
            }
        }
    });

    function getStepContent(step) {
        switch (step) {
            case 0:
                return <CustomerStep 
                    form={formik} 
                    values= {formik.values.customer}
                    touched={formik.touched.customer ? formik.touched.customer : formik.touched}
                    errors={formik.errors.customer ? formik.errors.customer : formik.errors} 
                    handleChange={formik.handleChange}
                />;
            case 1:
                return <ContactStep />; 
            case 2:
                return <LocationStep />;
            case 3:
                return <CheckStep />;
            default:
                return 'unknown step';
        }
    };

    const cacheData = (values) => {
        let newData = data;
        switch(activeStep) {
            case 0:
                newData.customer = values.customer;
                break;
            case 1:
                // not implemented jet
                // newData.customer = values.customer;
                break;
            case 2:
                // not implemented jet
                // newData.customer = values.customer;
                break;
            default:
                break;
        }
        setData(newData);
    }

    const handleNext = () => {
        let newSkipped = skipped;
        if (isStepSkipped(activeStep)) {
        newSkipped = new Set(newSkipped.values());
        newSkipped.delete(activeStep);
        }

        setActiveStep((prevActiveStep) => prevActiveStep + 1);
        setSkipped(newSkipped);
    };

...
// other Stepper functions
...

    return (
        <div className={classes.root}>
            <form onSubmit={formik.handleSubmit}>
                <Stepper activeStep={activeStep}>
                    {steps.map((label, index) => {
                    const stepProps = {};
                    const labelProps = {};
                    if (isStepOptional(index)) {
                        labelProps.optional = <Typography variant="caption">(optional)</Typography>;
                    }
                    if (isStepSkipped(index)) {
                        stepProps.completed = false;
                    }
                    return (
                        <Step key={label} {...stepProps}>
                        <StepLabel {...labelProps}>{label}</StepLabel>
                        </Step>
                    );
                    })}
                </Stepper>
                <div>
                    {activeStep === steps.length ? (
                    <div>
                        <Typography className={classes.instructions}>
                        Customer created.
                        </Typography>
                        <Button onClick={handleReset} className={classes.button}>
                        Reset
                        </Button>
                    </div>
                    ) : (
                    <div>
                        <div className={classes.instructions}>{getStepContent(activeStep)}</div>
                        <div>
                        <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
                            Back
                        </Button>
                        {isStepOptional(activeStep) && (
                            <Button
                            variant="contained"
                            color="primary"
                            onClick={handleSkip}
                            className={classes.button}
                            >
                            Skip
                            </Button>
                        )}
                        <Button
                            name="submit"
                            variant="contained"
                            color="primary"
                            type="submit"
                            className={classes.button}
                        >
                            {activeStep === steps.length - 1 ? 'Create customer' : 'Next step'}
                        </Button>
                        </div>
                    </div>
                    )}
                </div>
            </form>
        </div>
    );
}

CustomerStep.js

function CustomerStep(props) {
  return (
      <Box>
        <TextField
          className={style.box}
          id="inputCompany"
          name="customer.company" 
          label="Firmierung"
          onChange={props.handleChange}
          value={props.values.company} 
          error={props.touched.company && Boolean(props.errors.company)}
          helperText={props.touched.company && props.errors.company}
        />

       <TextField 
            className={style.box} 
            id="inputStreet" 
            name="customer.street"
            label="Straße" 
            onChange={props.handleChange} 
            //value={props.values.street} 
            error={props.touched.street && Boolean(props.errors.street)}
            helperText={props.touched.street && props.errors.street}
        />

        <TextField ... />

        ...
        // some more form stuff, same/similar props

      </Box>
  );
}

export default CustomerStep;

I hope it's not too much code and someone understands whats going on and maybe could help out.

Cheers Peet