Así que estoy haciendo un formulario de inicio de sesión simple con un botón de envío. Entonces, la idea es rastrear los intentos fallidos cuando un usuario intenta iniciar sesión. Si el usuario falla 5 intentos, el botón Enviar se desactivará durante 30 segundos. Hasta ahora es bastante simple, pero estoy tratando de implementar que el botón se deshabilite solo si esos 5 intentos fueron durante los 10 segundos. Así que estoy apilado aquí... ¡Espero su ayuda amigos!

Esto es lo que tengo hasta ahora

 const [login, setLogin] = useState<string>('') const [error, setError] = useState<string>('') const [attempts, setAttempts] = useState<number>(0) useEffect(()=>{ if(attempts===5){ setTimeout(()=>{ setAttempts(0) },1000) } },[attempts]) const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => { setLogin(e.target.value) } const useHandler = () => { setAttempts(prevState => prevState + 1) if (login === 'valid') { axios.get('https://api.github.com/users/anon').then(res => console.log(res.data)) setError('') setAttempts(0) } else if (login !== 'valid') { if (attempts >= 0 && attempts < 5) { setError('unsuccessful login attempt') } } }

y mi regreso aquí es mi regreso

 <div className="App"> <div className={'loginBlock'}> <div> <input name={'login'} value={login} type="text" onChange={onChangeHandler}/> <button disabled={attempts === 5} onClick={useHandler}>submit</button> </div> <div style={{color: 'red'}}>{error}</div> </div> </div>