Why my states are not resetting my input to an empty string?

I´m creating a simple login page, but i can´t make those two inputs email, passwordturn blank again when users introduce correctly theirs login info. They are resetting correctly all the others states, except these two setEmail(""),setPassword("").

I´m using the MUI library.

const Login = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [showPassword, setShowPassword] = useState(false);
    const [errEmail, setErrEmail] = useState("");
    const [errPassword, setErrPassword] = useState("");
    const [checkErrEmail, setCheckErrEmail] = useState(false);
    const [checkErrPassword, setCheckErrPassword] = useState(false);

    const handleClickShowPassword = () => {
        setShowPassword(!showPassword);
    }

    const onSubmitLogin = (event) => {
        event.preventDefault();

        const userLogin = {
            email,
            password
        }
        loginApi(userLogin)
    }


    const loginApi = async(body) => {
        await axios.post(`${BASE_URL}/login`, body)
        .then((res)=>{
            console.log(res.data);
            setEmail("")
            setPassword("")
            setErrEmail("");
            setErrPassword("");
            setCheckErrEmail(false);
            setCheckErrPassword(false);
        })
        .catch((err)=>{
            if(err.response.data.message.includes('Senha incorreta')){
                setErrPassword(err.response.data.message);
                setCheckErrPassword(true);
            }else{
                setErrEmail(err.response.data.message)
                setCheckErrEmail(true);
            }
            console.log(err.response.data.message);
        })
    }

Here is where i used the states.

return(
    <Main>
        <p>Entrar</p>
        <Form onSubmit={onSubmitLogin}>
        <InputMaterial 
        error={checkErrEmail}
        helperText={checkErrEmail ? errEmail : ''}
        id="outlined-basic"
        label="Email"
        type={'email'}
        variant="outlined" 
        placeholder={'Email'}
        onChange={(event)=>setEmail(event.target.value)}
        required
        />

        <DivPassword>
        <InputMaterial 
        error={checkErrPassword}
        helperText={checkErrPassword ? errPassword : ''}

        id="outlined-basic" 
        label="Password"
        type={showPassword ? 'password' : 'text'}
        variant="outlined"
        placeholder={'Mínimo 6 caracteres'}
        inputProps={{pattern:'.{6,}', title:'Mínimo 6 caracteres'}}
        onChange={(event)=>setPassword(event.target.value)}
        required

         
         />
        <IconButton
        aria-label="toggle password visibility"
        onClick={handleClickShowPassword}
        edge="end"
        >
        { showPassword ? <VisibilityOff /> : <Visibility />}
        </IconButton>
        </DivPassword>

         <ButtonStyled type='submit'>Entrar</ButtonStyled>
        </Form>
    </Main>

export default Login )

}

I tried call the setEmail and setPassword to their original state as a empty string (“”), but its not working.

Answer

You are trying to implement a controlled component, but with no value attribute:

<InputMaterial
  error={checkErrPassword}
  helperText={checkErrPassword ? errPassword : ''}
  id='outlined-basic'
  label='Password'
  type={showPassword ? 'password' : 'text'}
  variant='outlined'
  placeholder={'Mínimo 6 caracteres'}
  inputProps={{ pattern: '.{6,}', title: 'Mínimo 6 caracteres' }}
  value = {password} // <------- add this
  onChange={(event) => setPassword(event.target.value)}
  required
/>;

Without the value attribute here, the input is maintaining its own state and isn’t using the React state as the source, so state changes elsewhere in the script will not be reflected in the input.

In my opinion, controlled and uncontrolled components are an important concept to understand when implementing forms in React. See React’s documentation on controlled and uncontrolled components for a better understanding of this.

Hope this helps.

Advertisement

Answer