import React,{useRef} from 'react' import {Button,RegisterButton,Input,Container,Wrapper,Left,Logo,Desc,Right,Box} from '../Register/Register.styles' import {useNavigate,Link} from 'react-router-dom' import axios from 'axios' function Register() { const username =useRef(); const email=useRef(); const password=useRef(); const confirmPassword = useRef(); const navigate=useNavigate() const handleRegister=async (e)=>{ console.log("Hello") e.preventDefault(); if(confirmPassword.current.value!==password.current.value){ password.current.setCustomValidity("Password don't match!") } else{ const user={ username:username.current.value, email:username.current.value, password:password.current.value } console.log("Hey") try { await axios.post("http://localhost:8800/api/register",user) navigate('/login') } catch (error) { console.error(error) } } } return ( <Container> <Wrapper> <Left> <Logo>Socioblitzz</Logo> <Desc>Connect with friends and the world around you on SocioBlitzz</Desc> </Left> <Right> <Box > <form onSubmit={handleRegister}> <Input placeholder="Username" ref={username} required/> <Input placeholder="Email" type="email" ref={email} required/> <Input placeholder="Password" type="password" ref={password} minLength="6" required/> <Input placeholder="Confirm Password" type="password" ref={confirmPassword} required/> <Button type="submit">Register</Button> </form> <RegisterButton > <Link to="/login" style={{textDecoration:'none',color:'white'}}> Login to your Account </Link> </RegisterButton> </Box> </Right> </Wrapper> </Container> )enter code here } export default Register

Se suponía que la función handleRegister se llamaría después de enviar el formulario. Agregué console.log() pero en la consola no apareció nada, también probé onSubmit={console.log("Hey")} En este caso, la consola mostraba "Hey" cuando se representó la página (incluso antes de enviar el formulario)