Question 73678 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Formik value does not update with onChange formik.handleChange – Reactjs

This is my <CardBody> :

<CardBody>
  <CustomInput
    value={formik.values.email}
    onChange={(e) => {
      formik.handleChange(e);
      setErrMsg("");
    }}
    labelText="Email..."
    id="email"
    inputProps={{
      type: "email",
      endAdornment: (
        <InputAdornment position="end">
          <Email className={classes.inputIconsColor} />
        </InputAdornment>
      ),
    }}
  />
  <CustomInput
    value={formik.values.password}
    onChange={(e) => {
      console.log("change password");
      formik.handleChange(e);
      setErrMsg("");
    }}
    labelText="Password"
    id="pass"
    inputProps={{
      type: "password",
      endAdornment: (
        <InputAdornment position="end">
          <Icon className={classes.inputIconsColor}>lock_outline</Icon>
        </InputAdornment>
      ),
    }}
  />
</CardBody>;

Formik config :

const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
      submit: null,
    },
    validationSchema: Yup.object({
      email: Yup.string()
        .email("Must be a valid email")
        .min(5)
        .max(100)
        .required("Email is required"),
      password: Yup.string().max(255).required("Password is required"),
    }),
    onSubmit: async (values, helpers) => {
      // submit logic
    },
  });

CustomInput :

export default function CustomInput(props) {
    const {
      formControlProps,
      labelText,
      id,
      labelProps,
      inputProps,
      error,
      white,
      inputRootCustomClasses,
      success,
      value,
      onChange,
    } = props;
  
 //...
    return (
      <FormControl {...formControlProps} className={formControlClasses}>
        {labelText !== undefined ? (
          <InputLabel
            className={classes.labelRoot + " " + labelClasses}
            htmlFor={id}
            {...labelProps}
          >
            {labelText}
          </InputLabel>
        ) : null}
        <Input
          classes={{
            input: inputClasses,
            root: marginTop,
            disabled: classes.disabled,
            underline: underlineClasses,
          }}
          id={id}
          onChange={onChange}
          value={value}
          {...inputProps}
        />
      </FormControl>
    );
  }
  
  CustomInput.propTypes = {
    labelText: PropTypes.node,
    labelProps: PropTypes.object,
    id: PropTypes.string,
    inputProps: PropTypes.object,
    formControlProps: PropTypes.object,
    inputRootCustomClasses: PropTypes.string,
    error: PropTypes.bool,
    success: PropTypes.bool,
    white: PropTypes.bool,
  };

However when I try to update the second CustomInput component for password it does not change I can see the outpout from inside onChange property but the value does not update what I am missing ? any help will be appreciated

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    To update formik.values.example with

    onChange={(e) => {
   formik.handleChange(e);
}}

    The property id of the input should be equal to example
    solved by updating :

    <input
   //...
   id="pass"
/>

    To :

    <input
   //...
   id="password" 
/>

    Using the property name equal to example works as well :

    <input
   //...
   name="password" 
/>

  2. 0

    You update with setFieldValue(), remember to add name to the CustomInput attribute as well

    Try this:

    <CustomInput
    value={formik.values.password}
    name='password'
    onChange={(e) => {
        formik.handleChange(e);
        formik.setFieldValue('password',e)
    }}
    labelText="Password"
    id="pass"
    inputProps={{
      type: "password",
      endAdornment: (
        <InputAdornment position="end">
          <Icon className={classes.inputIconsColor}>lock_outline</Icon>
        </InputAdornment>
      ),
    }}
  />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search