A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled
This is SignIn Component. I am using Firebase concept. Material UI for designing purpose. I am using functional component.
Is it proper way to authenticate the user?I facing an error.
import React, { useState } from "react"; import Avatar from "@material-ui/core/Avatar"; import Button from "@material-ui/core/Button"; import CssBaseline from "@material-ui/core/CssBaseline"; import TextField from "@material-ui/core/TextField"; import LockOutlinedIcon from "@material-ui/icons/LockOutlined"; import Typography from "@material-ui/core/Typography"; import { makeStyles } from "@material-ui/core/styles"; import Container from "@material-ui/core/Container"; import Firebase from "../services/Firebase"; const Signin = () => { const [values, setValues] = useState({email: "",password: ""}) const useStyles = makeStyles(theme => ({ paper: { marginTop: theme.spacing(8), display: "flex", flexDirection: "column", alignItems: "center" }, avatar: { margin: theme.spacing(1), backgroundColor: theme.palette.secondary.main }, form: { width: "100%", // Fix IE 11 issue. marginTop: theme.spacing(1) }, submit: { height: 48, padding: "0 15px", margin: theme.spacing(7) } })); const classes = useStyles(); const signin = (e) => { e.preventDefault(); Firebase.auth().signInWithEmailAndPassword(values.email, values.password).then((u) => { console.log(u) }).catch((err) => { console.log(err); }) } const signup = (e) => { e.preventDefault(); Firebase.auth().createUserWithEmailAndPassword(values.email, values.password).then((u) => { console.log(u) }).catch((err) => { console.log(err); }) } const handleChange = (e) => { setValues({ [e.target.name]: e.target.value }) } return ( <Container component="main" maxWidth="xs"> <CssBaseline /> <div className={classes.paper}> <Avatar className={classes.avatar}> <LockOutlinedIcon /> </Avatar> <Typography component="h1" variant="h5"> Sign in </Typography> <form className={classes.form} noValidate> <TextField variant="outlined" margin="normal" required fullWidth placeholder="Enter Email.." onChange={(e) => handleChange(e)} value={values.email} /> <TextField variant="outlined" margin="normal" required fullWidth placeholder="Enter Password.." type="password" onChange={(e) => handleChange(e)} value={values.password} /> <Button type="submit" margin="normal" variant="contained" color="primary" className={classes.submit} onClick={(e) => signin(e)} > Sign In </Button> <Button type="submit" margin="normal" variant="contained" color="primary" className={classes.submit} onClick={(e) => signup(e)} > Sign Up </Button> </form> </div> </Container> ) } export default Signin; This Firebase Component
import firebase from 'firebase'; require('firebase/app') require('firebase/auth') const Firebase = firebase.initializeApp({ apiKey: "AIzaSyC_3KRb7H0Xw1-DGfqAzqfxeZaw3W5PaLg", authDomain: "my-login-page-react.firebaseapp.com", databaseURL: "https://my-login-page-react.firebaseio.com", projectId: "my-login-page-react", storageBucket: "my-login-page-react.appspot.com", messagingSenderId: "415587749418", appId: "1:415587749418:web:ee026252bc0a64c1a57d53" }); export default Firebase; 
This will delete the initial object key-pairs making the value={values.*} in TextField uncontrolled.
setValues({ [e.target.name]: e.target.value }) To override keeping earlier object key pairs use spread operation –
setValues({...values, [e.target.name]: e.target.value }) 
Problem might be caused by the way you keep values. You handle 2 values with 1 hook. When you call
setValues({ [e.target.name]: e.target.value }) It probably overrides the previous values which had 2 values with 1 value, either e-mail or password so one of them becomes unidentified and
//This is an uncontrolled component <TextField variant="outlined" margin="normal" required fullWidth placeholder="Enter Email.." onChange={(e) => handleChange(e)} value={unidentified} /> Try to seperate your values as:
[email,setEmail] : useState(""); [password,setPassword] : useState("") 
