TL.DR:

 import React, { useState } from "react"; export default function DropDown() { const [mail, setEmail] = useState(""); const handleChange = (e) => { setEmail(e.target.value); }; return ( <> <input value={mail} onChange={handleChange} maxLength={20} /> <button disabled={mail.includes("s@gmail.com") || mail.length < 1}> Submit </button> </> ); }

Vamos a desglosarlo:

1. Los ganchos ( useState , useEffect , etc.) no se pueden representar condicionalmente, por lo que no puede escribirlos dentro de declaraciones if else .
2. const [mail, setMail] = useState("") . El segundo atributo debe ser setSomething , no useSomething . El useSomething debe reservarse para las declaraciones de nuevos ganchos. El setMail devuelto por useState no es un gancho, sino una función normal (el useState mismo es el gancho).
3. setState (o setDisabled , en su ejemplo) nunca debe usarse directamente dentro del renderizado de un componente. Un setState hace que el componente se vuelva a renderizar, por lo que, si al volver a renderizar se encuentra un setState , activará otro renderizado, que activará otro setState , y así sucesivamente (lo que lleva a "Demasiadas renderizaciones". " tenías). En términos generales, setState solo debe usarse en controladores de eventos (como onClick , onKeyDown , onSomethingElseHapped , etc.)

Hay algunos problemas menores más con su código. Te animo a que repases los conceptos básicos de reaccionar una vez más.

No necesitarás crear un estado para discapacitados. Simplemente puede validar su uso en cada renderizado. La muestra se da a continuación. Cada vez que actualice la entrada, el componente se volverá a activar y se realizará la validación.

 import { useState } from "react"; import "./styles.css"; const blackListed = /^s@gmail\.com$/; const emailReg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; const isEmailValid = (email = "") => { if (!email.length) return false; if (!emailReg.test(email)){ return false } return !blackListed.test(email); }; export default function App() { const [mail, setEmail] = useState(""); const handleChange = ({ target: { value } }) => { setEmail(value); }; const isValidEmail = isEmailValid(mail); return ( <div> <input value={mail} onChange={handleChange} maxLength="20" /> <button disabled={!isValidEmail}> Submit </button> </div> ); }

Si desea borrar el correo electrónico después de un tiempo determinado. Puede usar useEffect con setTimeout y observe el cambio.

 useEffect(() => { const id = setTimeout(() => { if (!isValidEmail && mail.length) { alert("Your email is invalid"); setEmail("") } }, 1000) return () => clearTimeout(id); }, [isValidEmail])

Código completo:

 import { useState, useEffect } from "react"; import "./styles.css"; const blackListed = /^s@gmail\.com$/; const emailReg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; const isEmailValid = (email = "") => { if (!email.length) return false; if (!emailReg.test(email)) { return false } return !blackListed.test(email); }; export default function App() { const [mail, setEmail] = useState(""); const handleChange = ({ target: { value } }) => { setEmail(value); }; const isValidEmail = isEmailValid(mail); // Clear after some toat and message. useEffect(() => { const id = setTimeout(() => { if (!isValidEmail && mail.length) { alert("Your email is invalid"); setEmail("") } }, 1000) return () => clearTimeout(id); }, [isValidEmail]) return ( <div> <input value={mail} onChange={handleChange} maxLength="20" /> <button disabled={!isValidEmail}> Submit </button> </div> ); }

Código de trabajo:

https://codesandbox.io/embed/nervous-cache-tm5yt?fontsize=14&hidenavigation=1&theme=dark