const Login = (props) => {
const [enteredEmail, setEnteredEmail] = useState('');
const [emailIsValid, setEmailIsValid] = useState();
const [enteredPassword, setEnteredPassword] = useState('');
const [passwordIsValid, setPasswordIsValid] = useState();
const [formIsValid, setFormIsValid] = useState(false);
useEffect(()=>{
const identifier= setTimeout(()=>{
console.log('triggered only once for all the keystrokes typed in between 1000millis')
setFormIsValid(
enteredEmail.includes('@') && enteredPassword.trim().length > 6
);
},1000);
return ()=>{
console.log("cleanup...")
clearTimeout(identifier);
}; //cleaning up after 5seconds
},[enteredEmail, enteredPassword])
const emailChangeHandler = (event) => {
setEnteredEmail(event.target.value);
// setFormIsValid( // moved to useEffect.
// event.target.value.includes('@') && enteredPassword.trim().length > 6
// );
};
const passwordChangeHandler = (event) => {
setEnteredPassword(event.target.value);
setFormIsValid(
event.target.value.trim().length > 6 && enteredEmail.includes('@')
);
};
FILE: LOGIN.js
const validateEmailHandler = () => {
setEmailIsValid(enteredEmail.includes('@'));
};
const validatePasswordHandler = () => {
setPasswordIsValid(enteredPassword.trim().length > 6);
};
const submitHandler = (event) => {
event.preventDefault();
props.onLogin(enteredEmail, enteredPassword);
};
<form onSubmit={submitHandler}>
<div
className={`${classes.control} ${
emailIsValid === false ? classes.invalid : ''
}`}
>
<label htmlFor="email">E-Mail</label>
<input
type="email"
id="email"
value={enteredEmail} placeholder="UseEffect Used Here-- [Check Console]"
onChange={emailChangeHandler}
onBlur={validateEmailHandler}
/>
</div>
<div
className={`${classes.control} ${
passwordIsValid === false ? classes.invalid : ''
}`}
>
import React, { useEffect, useState } from 'react';
import Card from '../UI/Card/Card';
import classes from './Login.module.css';
import Button from '../UI/Button/Button';
const Login = (props) => {
const [enteredEmail, setEnteredEmail] = useState('');
const [emailIsValid, setEmailIsValid] = useState();
const [enteredPassword, setEnteredPassword] = useState('');
const [passwordIsValid, setPasswordIsValid] = useState();
const [formIsValid, setFormIsValid] = useState(false);
useEffect(()=>{
const identifier= setTimeout(()=>{
console.log('triggered only once for all the keystrokes typed in between 1000millis')
setFormIsValid(
enteredEmail.includes('@') && enteredPassword.trim().length > 6
);
},1000);
return ()=>{
console.log("cleanup...")
clearTimeout(identifier);
}; //cleaning up after 5seconds
},[enteredEmail, enteredPassword])
const emailChangeHandler = (event) => {
setEnteredEmail(event.target.value);
// setFormIsValid( // moved to useEffect.
// event.target.value.includes('@') && enteredPassword.trim().length > 6
// );
};
const passwordChangeHandler = (event) => {
setEnteredPassword(event.target.value);
setFormIsValid(
event.target.value.trim().length > 6 && enteredEmail.includes('@')
);
};
const validateEmailHandler = () => {
setEmailIsValid(enteredEmail.includes('@'));
};
const validatePasswordHandler = () => {
setPasswordIsValid(enteredPassword.trim().length > 6);
};
const submitHandler = (event) => {
event.preventDefault();
props.onLogin(enteredEmail, enteredPassword);
};
return (
<Card className={classes.login}>
<form onSubmit={submitHandler}>
<div
className={`${classes.control} ${
emailIsValid === false ? classes.invalid : ''
}`}
>
<label htmlFor="email">E-Mail</label>
<input
type="email"
id="email"
value={enteredEmail} placeholder="UseEffect Used Here-- [Check Console]"
onChange={emailChangeHandler}
onBlur={validateEmailHandler}
/>
</div>
<div
className={`${classes.control} ${
passwordIsValid === false ? classes.invalid : ''
}`}
>
<label htmlFor="password">Password</label>
<input
type="password"
id="password"
value={enteredPassword}
onChange={passwordChangeHandler}
onBlur={validatePasswordHandler}
/>
</div>
<div className={classes.actions}>
<Button type="submit" className={classes.btn} disabled={!formIsValid}>
Login
</Button>
</div>
</form>
</Card>
);
};
export default Login;
