múltiples problemas.
- uno que tu
onSubmit
hace referencia al mismo componente Register
el cual no debe ser así.
- Colocas el código de
createUserWithEmailAndPassword
directamente dentro del componente, lo cual ocaciona que se ejecute siempre al usar setEmail
o setPassword
.
- Tu método
onSubmit
nunca se ejecutará si los input
no están dentro de tu form
, sobre todo tu input
de tipo submit
Para ver a simple vista el problema ocasionado por setEmail
o setPassword
coloquemos un console.log()
dentro del componente para ver como se imprime y ejecuta cada ves que escribimos en los input
Esto unicamente a modo de ejemplo y mostrar lo que sucede cada ves que escribes y el por que de tu problema
const Register = () => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
console.log('Ejecutando todo código dentro de form----');
...
Solución al problema
Problema 1 y 2
Para solucionar tu problema, debemos crear un método que se ejecutara unicamente cuando sea el submit y colocarlo en el onSubmit
const Register = () => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
console.log('Ejecutando todo código dentro de form----');
const miSubmit = () => {
const auth = getAuth()
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
console.log('Logeado')
const user = userCredential.user
// ...
})
.catch((error) => {
const errorCode = error.code
const errorMessage = error.message
console.log('error: ' + errorMessage)
})
}
return (
<div className="input-field col s6">
<form action="" onSubmit={miSubmit}>
//....
Problema 3
Tu form
debe contener los input
que controlara o necesitara, incluyendo el submit
.
return (
<div className="input-field col s6">
<form action="" onSubmit={miSubmit}>
<input type="text"
className="validate"
id="email"
value={email}
placeholder="Email"
onChange={(e) => setEmail(e.target.value)} />
<input placeholder="Password"
onChange={(e) => setPassword(e.target.value)} />
<input className="waves-effect waves-light btn" type='submit' name="Register" value='registro' />
</form>
</div>
)
Tu código en general debe quedar algo como esto.
const Register = () => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
console.log('Ejecutando todo código dentro de form----');
const miSubmit = () => {
const auth = getAuth()
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
console.log('Logeado')
const user = userCredential.user
// ...
})
.catch((error) => {
const errorCode = error.code
const errorMessage = error.message
console.log('error: ' + errorMessage)
})
}
return (
<div className="input-field col s6">
<form action="" onSubmit={miSubmit}>
<input type="text"
className="validate"
id="email"
value={email}
placeholder="Email"
onChange={(e) => setEmail(e.target.value)} />
<input placeholder="Password"
onChange={(e) => setPassword(e.target.value)} />
<input className="waves-effect waves-light btn" type='submit' name="Register" value='registro' />
</form>
</div>
)
}
Evitar recarga de pagina al usar submit
para esto unicamente recibimos el evento y utilizamos e.preventDefault()
ejemplo
const miSubmit = (e) => {
e.preventDefault();
console.log('Ejecutando submit sin evento');
}