React app hanging when typing on input with onChange state

Question

When I start typing anything in the input fields, the page hangs and nothing gets typed. It was working fine before, it just started happening suddenly. I don't know what went wrong.

I have tried adding onBlur and the problem persists. I tried adding value={registerEmail} in the input fields and the problem still remains as well.

Pleae check :(

import React, {useState} from 'react'
import {
    createUserWithEmailAndPassword,
    onAuthStateChanged,
    signInWithEmailAndPassword,
    signOut
} from 'firebase/auth'
import { Form, Button, Card, Container } from 'react-bootstrap'
import {auth} from '../../services/firebase-config'

export default function SignUp() {

    const [registerEmail, setRegisterEmail] = useState("")
    const [registerPassword, setRegisterPassword] = useState("")
    const [registerConfirmedPassword, setRegisterConfirmedPassword] = useState("")
    
    const [user, setUser] = useState({})

    onAuthStateChanged(auth, (currentUser) => {
        setUser(currentUser)
    })

    const register = async (event) => {
        event.preventDefault();
        try {
            const user =  await createUserWithEmailAndPassword(auth, registerEmail, registerPassword)
            console.log(user)
        }
        catch(error) {
            //accounts that don't exist
            console.log(error.message)
        }
    }

    const login = async(event) => {
        event.preventDefault();
        try {
            const user =  await signInWithEmailAndPassword(auth, registerEmail, registerPassword)
            console.log(user)
        }
        catch(error) {
            //accounts that don't exist
            console.log(error.message)
        }
    }

    const logout = async(event) => {
        try {
            await signOut(auth)
        }
        catch(error) {
            console.log(error.message)
        }
    }

    return (
        <Container className="d-flex align-items-center justify-content-center w-100">
            <Card className='p-3' style={{maxWidth:"400px"}}>
                <Card.Body>
                    <h2 className='text-center mb-4'>Sign Up</h2>
                    <Form>
                        <Form.Group id="email">
                            <Form.Label>Email</Form.Label>
                            <Form.Control type="email" onChange={e => setRegisterEmail(e.target.value)} required />
                        </Form.Group>
                        <Form.Group id="password">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" onChange={e => setRegisterPassword(e.target.value)}  required />
                        </Form.Group>
                        <Form.Group id="password-confirm">
                            <Form.Label>Password Confirmation</Form.Label>
                            <Form.Control type="password" onChange={e => setRegisterConfirmedPassword(e.target.value)} required />
                        </Form.Group>
                        { <Button className='w-100' onClick={(e) => register(e)}>Sign Up</Button>}
                    </Form>
                </Card.Body>
                <div className='w-100 text-center mt-2'>
                    Already have an account? <Button className='w-100' onClick={(e) => login(e)}>Login</Button>
                </div>
                <Button onClick={(e) => logout(e)}>Logout</Button>
            </Card>
        </Container>
    )
}

what do you see in console? – Manish Sencha Jul 29 '22 at 18:37 — Manish Sencha, Jul 29 '22 at 18:37

Devendra Kushwaha · Answer 1 · 2022-07-29T19:09:18.707

Value attr and Initial state was missing in the form.control

   <Form>
                            <Form.Group id="email">
                                <Form.Label>Email</Form.Label>
                                <Form.Control value={registerEmail} type="email" onChange={e => setRegisterEmail(e.target.value)} required />
                            </Form.Group>
                            <Form.Group id="password">
                                <Form.Label>Password</Form.Label>
                                <Form.Control type="password" value={registerPassword} onChange={e => setRegisterPassword(e.target.value)}  required />
                            </Form.Group>
                            <Form.Group id="password-confirm">
                                <Form.Label>Password Confirmation</Form.Label>
                                <Form.Control type="password" onChange={e => setRegisterConfirmedPassword(e.target.value)} required />
                            </Form.Group>
                            { <Button className='w-100' onClick={(e) => register(e)}>Sign Up</Button>}
                        </Form>

Example - codesandbox

I already added in the question that even with value attribute, it does not work. Please read the question carefully. — za_ali33, Jul 30 '22 at 15:03

React app hanging when typing on input with onChange state

1 Answers1