A Disapearing error message inside a div element

Question

i am creating a login page in react whereby the user inputs the username and password and the page checks it in my express backend, if the username does not exist it gives and error in the form of a div element with an error message like this password error

or like this too incomplete form error her is the code behind it

import React from "react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./Login.css";
import Intro from "../../Components/Intro/Intro";
import axios from "axios";

const Login = () => {
  // to handle proceeding forward
  const navigate = useNavigate();

  //handle submit action
  const handleSubmit = (event) => {
    event.preventDefault();

    //get data form the inputs
    var [adm, pass] = document.forms[0];

    //validate admission
    if (adm.value) {
      //validate password
      if (pass.value) {
        const cred = {
          identifier: "HSM/001/2021",
          password: pass.value,
        };
        axios
          .post("http://localhost:8000/api/credentials", cred)
          .then((res) => {
            if (res.data.logged) {
              navigate(`/home/${"sdds"}`);
            } else {
              setError({ name: "password", message: "Incorrect Password" });
            }
            
          })
          .catch((error) => console.log(error));
      } else {
        setError({ name: "password", message: "Please insert Password" });
      }
    } else {
      setError({
        name: "admission",
        message: "Please insert admission number",
      });
    }
  };

  //handle errors
  const [error, setError] = useState({ name: "", message: "" });

  //outputting Errors
  const outputError = (name) =>
    name === error.name && <div className="error">{error.message}</div>;
  return (
    <div className="Login">
      <Intro />
      <div className="card grid">
        <div className="institutionDetails">
          <span>
            <h1>Rongo University</h1>
          </span>
          <span>geliana</span>
        </div>
        <div className="formInput">
          <form onSubmit={handleSubmit}>
            <span>
              <h1>Log in</h1>
            </span>
            <div className="inputContainer">
              <label>Admission Number:</label>
              <input type="text" className="input text" />
              {outputError("admission")}
            </div>
            <div className="inputContainer">
              <label>Password:</label>
              <input type="password" name="" id="" className="input text" />
              {outputError("password")}
            </div>
            <div className="submitContainer">
              <input type="submit" value="Log in" className="button" />
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Login;

so how do i make the error dissapear automaticaly or when the user starts typing itno the inputs

score 0 · Answer 1 · answered Jun 14 '22 at 18:20

0

there are lots of options as always ;) 2 i can think of looking into your code.

using CSS animations. refer to this answer
use onChange or onInput listener on the input field and set the state of the error to undefined/empty/null

answered Jun 14 '22 at 18:20

Prasanna

10,956
2
28
40

score 0 · Accepted Answer · answered Jun 14 '22 at 18:28

If you want to keep your Input uncontrolled (without passing value and onChange), you have at least two ways to achieve what you want

// 1. Reset error state after focusing input
<input type="text" onFocus={() => setError({ name: "", message: "" })} />

// 2. Reset error state automatically after 5 second for example
let timeout = null;

const Login = () => {
   // ...
   useEffect(() => {
     return () => {
       if (timeout) {
         clearTimeout(timeout);
       }
     };
   }, []);

   const handleSubmit = (event) => {
     // ......
     setError({ name: "password", message: "Please insert Password" });
     timeout = setTimeout(() => setError({ name: "", message: "" }), 5000);
   };

A Disapearing error message inside a div element

2 Answers2