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?