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

handleRegister function was supposed to be called after submitting form. I added console.log() but on console nothing showed up also i tried onSubmit={console.log("Hey")} In this case console was displaying "Hey" when the page was rendered (even before submitting the form)