En mi proyecto, creé un componente que se encarga de los inicios de sesión. Devuelve un formulario y contiene un método de validación llamado onSubmit . Actualmente el método se ve así:

 import { useState } from "react" function Login({ onLogin }) { const [name, setName] = useState("") const [password, setPassword] = useState("") function onSubmit(e) { e.preventDefault() if (!name && !password) return alert("Please enter a username and a password!") if (!name) return alert("Please enter a username!") if (!password) return alert("Please enter a password!") onLogin({ name, password }) setName("") setPassword("") } }

Quería que todo se viera mejor y cambié las 3 declaraciones if con 2 operadores ternarios y una declaración if:

 import { useState } from "react" function Login({ onLogin }) { const [name, setName] = useState("") const [password, setPassword] = useState("") let missingData function onSubmit(e) { e.preventDefault() (!name && !password) ? missingData = "username and a password" : !name ? missingData = "username" : missingData = "password" if (!password || !name) return alert(`Please enter a ${missingData}!`) onLogin({ name, password }) setName("") setPassword("") } }

Sin embargo, tan pronto como intento esto, ocurre el siguiente error:

TypeError: e.preventDefault(...) no es una función

No tengo idea de cómo el uso de un ternario aquí está afectando el objeto del evento. Especialmente porque lo hice de manera similar en el componente Registro y no ocurrió ningún error.

La declaración de devolución del componente, incluido el formulario, se ve así:

 return ( <> <h3>Login</h3> <form onSubmit={onSubmit}> <label>Username</label> <input type="text" placeholder="Username" value={name} onChange={(e) => setName(e.target.value)} /> <label>Password</label> <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> <input type="submit" value="Login" /> </form> </> )