Unable to reset value in State of React - reactjs

Question

export default function Register() {
const [formData, setformData] = useState({
name: "",
emailid: "",
password: "",
password2: "",
});
const [formHelperText, setFormHelperText] = useState({
formHelperTextname: "",
formHelperTextemailid: "",
formHelperTextpassword: "",
formHelperTextpassword2: "",
});
const { name, emailid, password, password2 } = formData;
const {
formHelperTextname,
formHelperTextemailid,
formHelperTextpassword,
formHelperTextpassword2,
} = formHelperText;
const onChange = (e) => {
setformData({ ...formData, [e.target.name]: e.target.value });
};
let onSubmit = (e) => {
e.preventDefault();
debugger;
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
setFormHelperText({
...formHelperText,
formHelperTextname: "",
formHelperTextemailid: "",
});
if (name.length === 0) {
setFormHelperText({
...formHelperText,
formHelperTextname: "Enter your name",
});
}
else if (emailid.length === 0) {
setFormHelperText({
...formHelperText,
formHelperTextemailid: "Enter your email",
});
} else if (!emailid.match(mailformat)) {
setFormHelperText({
...formHelperText,
formHelperTextemailid: "Enter valid email",
});
}
};
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign up
</Typography>
<form className={classes.form} noValidate onSubmit={onSubmit}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="name"
label="Name"
name="name"
value={name}
onChange={onChange}
autoFocus
error={formHelperTextname.length > 0}
helperText={formHelperTextname}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="emailid"
value={emailid}
onChange={onChange}
autoComplete="email"
error={formHelperTextemailid.length > 0}
helperText={formHelperTextemailid}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
value={password}
onChange={onChange}
error={formHelperTextpassword.length > 0}
helperText={formHelperTextpassword}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password2"
label="Retype Password"
type="password"
id="password2"
value={password2}
onChange={onChange}
error={formHelperTextpassword2.length > 0}
helperText={formHelperTextpassword2}
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign Up
</Button>
<Grid container>
<Grid item xs></Grid>
<Grid item>
<Link href="/" variant="body2">
{"Already have an account? Sign In"}
</Link>
</Grid>
</Grid>
</form>
</div>
</Container>
);
}
When I'm trying to reset the value of formHelperTextname onSubmit function. The value is not updating to an empty string.
The value is set inside the IF condition but before the if condition when I try to reset the value of formhelperText it's not working
When I'm trying to reset the value of formHelperTextname onSubmit function. The value is not updating to an empty string.
The value is set inside the IF condition but before the if condition when I try to reset the value of formhelperText it's not working

Answer 1

States cannot be assigned immediately after they are changed. It is necessary to listen to State and do the same.
You can review the revised code below.
I hope I helped.
const [isClear, setIsClear] = useState(false);
useEffect(() => {
if (isClear) {
setFormHelperText({
...formHelperText,
formHelperTextname: "",
formHelperTextemailid: "",
});
}
}, [isClear]);
let onSubmit = (e) => {
e.preventDefault();
debugger;
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
setIsClear(true);
if (name.length === 0) {
setFormHelperText({
...formHelperText,
formHelperTextname: "Enter your name",
});
}
else if (emailid.length === 0) {
setFormHelperText({
...formHelperText,
formHelperTextemailid: "Enter your email",
});
} else if (!emailid.match(mailformat)) {
setFormHelperText({
...formHelperText,
formHelperTextemailid: "Enter valid email",
});
}
};