Estoy haciendo un login en react para practicar y me encuentro con el problema de que si google traduce automaticamente mi pagina un evento que tengo en un span de mi codigo no funciona, lo he probado en ingles que es el idioma original y funciona perfectamente. ¿Por que pasa esto y como podria coregirlo?
Estoy aprediendo a programar en react y es primera vez que me pasa esto
import { Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { NetflixButton, NetflixInput } from "../styles/stylesComponents";
import { useRef, useState } from "react";
import { auth } from "../firebase";
import {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
} from "firebase/auth";
import { authenticationUser } from "../helpers/authentication";
const initialForm = {
email: "",
password: "",
};
function SignUp() {
const [form, setForm] = useState(initialForm);
const [isNewUser, setIsNewUser] = useState(true); // Estado para determinar el tipo de acción
const classes = useStyles();
const handleChange = (e) => {
const { name, value } = e.target;
e.target.setCustomValidity("");
setForm({ ...form, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
const { email, password } = form;
// Autenticación de formulario
if (!authenticationUser(e.target)) return;
// Registro o inicio de sesión
if (isNewUser) {
createUserWithEmailAndPassword(auth, email, password)
.then((authUser) => console.log(authUser))
.catch((error) => console.log(error));
} else {
signInWithEmailAndPassword(auth, email, password)
.then((authUser) => console.log(authUser))
.catch((error) => console.log(error));
}
};
return (
<div className={classes.root}>
<Typography variant="h3" sx={{ marginBottom: "30px" }}>
{isNewUser ? "Sign Up" : "Login"}
</Typography>
<form className={classes.form} onSubmit={handleSubmit}>
<NetflixInput
type="email"
name="email"
required
placeholder="Email"
value={form.email}
onChange={handleChange}
/>
<NetflixInput
type="password"
name="password"
required
placeholder="Password"
value={form.password}
onChange={handleChange}
/>
<NetflixButton type="submit" style={{ width: "200px" }}>
{isNewUser ? "Register" : "Login"}
</NetflixButton>
<Typography variant="h6">
{isNewUser ? "Already have an account?" : "Don't have an account?"}{" "}
<span onClick={() => setIsNewUser(!isNewUser)}> //Problema
{isNewUser ? "Login" : "Register."}
</span>
</Typography>
</form>
</div>
);
}
const useStyles = makeStyles((theme) => ({
root: {
width: "80%",
maxWidth: "400px",
padding: "40px",
backgroundColor: "#00000099",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
},
form: {
"&>div": {
width: "100%",
marginBottom: "20px",
},
"& h6": {
fontSize: "11px",
"& span": {
fontWeight: "bold",
cursor: "pointer",
"&:hover": {
textDecoration: "underline",
},
},
},
},
}));
export default SignUp;
He intentado cambiar de etiqueta, me gustaria saber si hay alguna solcucion para esto, mas que mover el evento hacia otra parte o reasignar el evento.
<html translate="no">