Ad

OnChange Method Is Not Working On All The Fields

- 1 answer

I've defined the initial Value for the input fields in useState Hook, here is the code:

const [name, setName] = useState({
        email: "",
        password: "",
        confirmPassword: "",
        storeName: ""
    })

And I'm accessing the Value in the Material UI input fields here

<FormControl className={classes.formControl} fullWidth={true} variant="filled" >
                        <InputLabel htmlFor="component-filled">Email</InputLabel>
                        <FilledInput id="component-filled" onChange={handleChange} name="email" value={name.email} />
                        {error.emailError}
                    </FormControl>
                    <FormControl className={classes.formControl} fullWidth={true} variant="filled">
                        <InputLabel htmlFor="component-filled">Password</InputLabel>
                        <FilledInput id="component-filled" onChange={handleChange} type="password" name="password" value={name.password} />
                        {error.passwordError}
                    </FormControl>
                    <FormControl className={classes.formControl} fullWidth={true} variant="filled">
                        <InputLabel htmlFor="component-filled">Confirm Password</InputLabel>
                        <FilledInput id="component-filled" onChange={handleChange} type="password" name="confirmpassword" value={name.confirmPassword} />
                        {error.confirmPasswordError}
                    </FormControl>
                    <FormControl className={classes.formControl} fullWidth={true} variant="filled" >
                        <InputLabel htmlFor="component-filled">Store Name</InputLabel>
                        <FilledInput id="component-filled" onChange={handleChange} name="storename" value={name.storeName} />
                        {error.usernameError}
                    </FormControl>

The problem I'm getting is which I typed in other three fields "Email", "Password" and "storename" onChange is working fine but It's not accepting any value for "Confirmpassword", means I am unable to type in confirm password field.

Here is my HandleChange method:

const handleChange = e => {
        e.persist()
        setName(name => (
            {
                ...name,
                [e.target.name]: e.target.value
            }
        ))
}

I'm not sure, what I'm missing so help would be much appreciated.

Ad

Answer

Your input name is confirmpassword but your name for it in state is confirmPassword. Change one to match the other and it should work.

<FilledInput 
  id="component-filled" 
  onChange={handleChange} 
  type="password" 
  name="confirmPassword" 
  value={name.confirmPassword} 
/>
Ad
source: stackoverflow.com
Ad