CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
BlackH3art
BlackH3art

Reputation: 596

Why my handleChange is not being invoked? MaterialUI

Is there something wrong with the TextField component from Material UI that I'm missing? My handleChange simply is not getting invoked. I can type in value in the inputs, but state of the component is not changing.

Here is the Auth component:

const Auth = () => {

  const [formData, setFormData] = useState(initialFormState)

  const handleSubmit = (e) => {
    e.preventDefault(); 

    console.log(formData);
  }

  const handleChange = (e) => {

    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    })
  }

  return ( 
    <Container component="main" maxWidth="xs">
      <Paper className={classes.paper} elevation={3}>

        <form className={classes.form} onSubmit={handleSubmit}>
          <Grid container spacing={2}>

            <Input name="email" label="e-mail" handleChange={handleChange} type="email" />
            <Input name="password" label="password" handleChange={handleChange} type={showPassword ? "text" : "password"} handleShowPassword={handleShowPassword} />

          </Grid>

          <Button type="submit" variant="contained" color="primary" className={classes.submit} fullWidth>
            {isSignup ? "Sign up" : "Sign in"}
          </Button>

        </form>

      </Paper>
    </Container>
  );
}

And the input component which is inside Auth:

const Input = ({ name, half, handleChange, type, label, autoFocus, handleShowPassword  }) => {

  return ( 
    <>
      <Grid item xs={12} sm={half ? 6 : 12}>
        <TextField 
          name={name}
          handleChange={handleChange}
          variant="outlined"
          required
          fullWidth
          label={label}
          autoFocus={autoFocus}
          type={type}
          InputProps={name === "password" ? {
            endAdornment: (
              <InputAdornment position="end">
                <IconButton onClick={handleShowPassword}>
                  {type === "password" ? <Visibility/> : <VisibilityOff/>}
                </IconButton>
              </InputAdornment>
            )
          } : null}
        />
      </Grid>
    </>
   );
}

Upvotes: 0

Views: 59

Answers (1)

Ashish Bajaj
Ashish Bajaj

Reputation: 49

You've to change the input attribute from handleChange to onChange

<Input name="email" label="e-mail" onChange={handleChange} type="email" />
<Input name="password" label="password" onChange={handleChange} type={showPassword ? "text" : "password"} handleShowPassword={handleShowPassword} />

Upvotes: 1

Related Questions