A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled

Question

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;

Answer 1

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
    })

Answer 2

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("")