State of the form on submission

Viewed 20

I have the multi-step registration form that uses three states:

  • Active Step (Identifier for the current step in the registration process)
  • Form Data (Dictionary of values from inputs)

My form has the final step that summarizes the user responses and asks for a password. Yet on form submission, the field for the password is always empty despite the fact that the onChange handler is always called.

FinalStep.js:

<Grid component="form" onSubmit={this.handleSubmit} container item xs={12} mt={2} spacing={3}
                              sx={{
                                  display: 'flex',
                                  justifyContent: 'space-between'
                              }}>

                            <Grid item xs={6}>
                                <TextField
                                    id="password"
                                    name="password"
                                    label="Password"
                                    type="password"
                                    autoComplete="password"
                                    fullWidth
                                    onChange={this.handleFormData("password")}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    id="confirmationPassword"
                                    name="confirmationPassword"
                                    label="Confirmation Password"
                                    type="password"
                                    autoComplete="confirmationPassword"
                                    fullWidth
                                    onChange={this.handleFormData("confirmationPassword")}
                                />
                            </Grid>
                            <Grid item xs={12} mt={2}>
                                <FormControl component="fieldset">
                                    <FormControlLabel
                                        value="end"
                                        control={<Checkbox/>}
                                        label={<this.PrivacyPolicyLabel/>}
                                        labelPlacement="end"
                                    />
                                </FormControl>
                            </Grid>
                            <Grid item xs={12}>
                                <Button type="submit"
                                        fullWidth
                                        variant="contained"
                                        sx={{mt: 3, mb: 2}}
                                        onClick={this.handleSubmit}
                                    {t('final.submitButton', '', {ns: 'registration'})}
                                </Button>
                            </Grid>
                        </Grid>

I use the following handleFormData function:

// handling form input data by taking onchange value and updating our previous form data state
    const handleInputData = input => e => {
        // input value from the form
        console.log(input);
        console.log(e);

        if (e.target !== undefined) {

            //updating for data state taking previous state and then adding new value to create new object
            setFormData(prevState => ({
                ...prevState,
                [input]: value
            }));

        } else if (['number', 'string'].includes(typeof e)) {
            const {value} = e;

            //updating for data state taking previous state and then adding new value to create new object
            setFormData(prevState => ({
                ...prevState,
                [input]: value
            }));
        }
    }

And finally the handleSubmit function:

const handleSubmit = async e => {
        e.preventDefault();

        registerUser(...formData);
    }

All fields from the previous steps get propagated to the registerUser function except the password fields. Does anyone know what could be the cause?

0 Answers
Related