title: How to reset the form and login error message in reactjs
body: <p>I have a formik form where if the user credentials are invalid then it shows an error message. However I want the error message to disappear, i.e, when you click to re-enter the email or password again then the error message should disappear. I also want the form to reset after calling the api. I'd be very grateful if someone can show me where to do this two changes. My form looks something like this:</p>
  
  <pre><code>const Login = props =&gt; {
    const classes = useStyles();
    const [loginError, setLoginError] = useState("");
  
    const handleSubmit = async (values, { setSubmitting }) =&gt; {
      const { email, password } = values;
      var body = {
        password: password,
        email: email
      };
      console.log(body);
      const options = {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json"
        },
        body: JSON.stringify(body)
      };
      const url = "/api/authenticate";
      try {
        const response = await fetch(url, options);
        const text = await response.text();
        setSubmitting(false);
        if (text === "redirect") {
          props.history.push(`/editor`);
        } else if (text === "verifyemail") {
          props.history.push({
            pathname: '/verifyOtp',
            state: { email },
          });
        } else {
          setLoginError("Email or Password is incorrect"); //this is the error message
        }
      } catch (error) {
        console.error(error);
      }
    };
  
    return (
      &lt;Formik
        initialValues={{ email: "", password: "" }}
        onSubmit={handleSubmit}
        //********Using Yup for validation********/
  
        validationSchema={Yup.object().shape({
          email: Yup.string()
            .email()
            .required("Required"),
          password: Yup.string()
            .required("No password provided.")
            .min(8, "Password is too short - should be 8 chars minimum.")
            .matches(/(?=.*[0-9])/, "Password must contain a number.")
        })}
      &gt;
        {props =&gt; {
          const {
            values,
            touched,
            errors,
            isSubmitting,
            handleChange,
            handleBlur,
            handleSubmit
          } = props;
          return (
            &lt;&gt;
              &lt;Container component="main" maxWidth="xs"&gt;
                &lt;CssBaseline /&gt;
                &lt;div className={classes.paper}&gt;
                  &lt;Avatar className={classes.avatar}&gt;
                    &lt;LockOutlinedIcon /&gt;
                  &lt;/Avatar&gt;
                  &lt;Typography component="h1" variant="h5"&gt;
                    Sign in
                  &lt;/Typography&gt;
                  &lt;form
                    className={classes.form}
                    onSubmit={handleSubmit}
                    noValidate
                  &gt;
                    &lt;TextField
                      variant="outlined"
                      margin="normal"
                      required
                      fullWidth
                      id="email"
                      value={values.email}
                      label="Email Address"
                      name="email"
                      autoComplete="email"
                      onChange={handleChange}
                      onBlur={handleBlur}
                      className={errors.email &amp;&amp; touched.email &amp;&amp; "error"}
                    /&gt;
                    {errors.email &amp;&amp; touched.email &amp;&amp; (
                      &lt;div className="input-feedback"&gt;{errors.email}&lt;/div&gt;
                    )}
                    &lt;TextField
                      variant="outlined"
                      margin="normal"
                      required
                      fullWidth
                      name="password"
                      value={values.password}
                      label="Password"
                      type="password"
                      id="password"
                      onBlur={handleBlur}
                      autoComplete="current-password"
                      className={errors.password &amp;&amp; touched.password &amp;&amp; "error"}
                      onChange={handleChange}
                    /&gt;
  
                    {errors.password &amp;&amp; touched.password &amp;&amp; (
                      &lt;div className="input-feedback"&gt;{errors.password}&lt;/div&gt;
                    )}
  
                    {loginError &amp;&amp; (    
                      &lt;div style={{ color: "red" }}&gt;
                        &lt;span&gt;{loginError}&lt;/span&gt;
                      &lt;/div&gt;    
                    )}      //want this error message to reset when the user clicks on any of the field to enter the login credentials again
  
                    &lt;Button
                      type="submit"
                      fullWidth
                      variant="contained"
                      color="primary"
                      className={classes.submit}
                      disabled={isSubmitting}
                    &gt;
                      Sign In
                    &lt;/Button&gt;
                    &lt;Grid container&gt;
                      &lt;Grid item xs&gt;
                        {/* &lt;Link href="#" variant="body2"&gt;
                  Forgot password?
                &lt;/Link&gt; */}
                      &lt;/Grid&gt;
                      &lt;Grid item&gt;
                        &lt;Link href="/register" variant="body2"&gt;
                          {"Don't have an account? Sign Up"}
                        &lt;/Link&gt;
                      &lt;/Grid&gt;
                    &lt;/Grid&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
                &lt;Box mt={8}&gt;
                  &lt;Copyright /&gt;
                &lt;/Box&gt;
              &lt;/Container&gt;
            &lt;/&gt;
          );
        }}
      &lt;/Formik&gt;
    );
  };
  
  export default Login;
  </code></pre>
  
  <p>created a sandbox to better understand the problem. enter any email and any password matching the yup validation and click enter then the login error message is shown. I want that to disappear as soon as you click on the textfields  again to re-enter the login info.</p>
  
  <p><a href="https://codesandbox.io/s/validated-react-form-gt0xn" rel="nofollow noreferrer">codesandbox</a></p>