Showing form errors only when clicking submit button in react

I have this react component that renders a simple log in funcionality, error validation is in a document apart, and while writing if there is an error it will render, but i want them to render only when i click the submit button, i've been the entire day here and still cannot find the solution >.< first time using this platform tho

if possible dont bring me the exact solution but enlighten my mind i'd like to see if i can make it myself

import { useState } from "react"
import validations from "./validations"

function Form({login}) {
    const [errors, setErrors] = useState({})
    const [userData, setUserData] = useState({
        email: '',
        password: ''
    })

    const handlechange = (event)=>{
        setUserData({
            ...userData,
            [event.target.name]: event.target.value
        })

        setErrors(validations({
            ...userData,
            [event.target.name]: event.target.value
        }))
    }

    const handleSubmit = (event)=>{
        event.preventDefault()
        login(userData)
    }

  return (
    <form onSubmit={handleSubmit}>
        <label htmlFor="pmail">Email:</label>
            <input 
                type="email" 
                name='email'
                input ={userData.email}
                onChange={handlechange}
            />

            {errors.email && <p>{errors.email}</p>}

        <label htmlFor="password">Password:</label>
            <input 
                type="password"
                name="password" 
                input={userData.password}
                onChange={handlechange}
            />

            {errors.password && <p>{errors.password}</p>}
            
        <button>Log In</button>

    </form>
  )
}
export default Form

You set the error every time in handlechange() so the errors are rendered as the state has changed. If you only validate onSubmit and set the errors there they will only be rendered when you actually submit the form.

Here a sample implementation based on your code. Try to login with evil@hacker.com and any password to see errors getting rendered when you submit the form.

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

function validations(user) {
if (user.email.toLowerCase() === "evil@hacker.com") {
return { email: "Hackers are not allowed here!" }
}
return {};
}
function login(user) {
console.log(`Successfully logged in user ${user.email}`);
}
function isEmpty(obj) {
for (let i in obj) return false;
return true;
}
function Form() {
const [errors, setErrors] = React.useState({})
const [userData, setUserData] = React.useState({
email: '',
password: ''
})
const handlechange = (event) => {
setUserData({
...userData,
[event.target.name]: event.target.value
})
}
const handleSubmit = (event) => {
event.preventDefault()
const validationResult = validations(userData);
if (isEmpty(validationResult)) {
// no errors
setErrors({})
login(userData);
}
else {
console.log(`Access denied for ${userData.email}`);
setErrors(validationResult);
}
}
return (
<form onSubmit={handleSubmit} class="form">
<label htmlFor="email">Email:</label>
<input
type="email"
name='email'
input={userData.email}
onChange={handlechange}
/>
{errors.email && <p>{errors.email}</p>}
<label htmlFor="password">Password:</label>
<input
type="password"
name="password"
input={userData.password}
onChange={handlechange}
/>
{errors.password && <p>{errors.password}</p>}
<button>Log In</button>
</form>
)
}
ReactDOM.render(<Form />, document.getElementById('root'));

<!-- language: lang-css -->

.form {
display: flex;
flex-direction: column;
gap: 0.25rem;
}

<!-- language: lang-html -->

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

<!-- end snippet -->