Link button making problems with redirect

November 14, 2022

I have a question. I have a Link element and a CustomButton element inside it which I have created and on that button I have onClick handler.

< Link to = "/dashboard"
style = {
    linkStyles
  } >
  <
  CustomButton text = "Login"
onClick = {
  handleSubmit
}
/> <
/Link>

This above is the code for the button and link

const handleSubmit = (e: any) => {
    if (email !== user.email || password !== user.password) {
      setError("Please make sure you have the correct email or password");
    } else {
      setError("");
    }
  };

And this is the handler. How can I make so when I click I dont get redirected immediately but instead let the handler show the error if the password or email are incorrect

>Solution :

can add a prevent default and useHistory to navigate

 const history = useHistory();

 const handleSubmit = (e: any) => {
       e.preventDefault();

    let timeout = 0

    if (email !== user.email || password !== user.password) {
      setError("Please make sure you have the correct email or password");
      timeout = 3000 // show the error for 3 seconds
    } else {
      setError("");
    }

    setTimeout(() => {history.push('/dashboard')}, timeout)
};