Unable to reset value in State of React

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",
      });
    }
  };