uncontrolled to controlled switch warning

I’m just trying this library and I get the following warning:

proxyConsole.js:56 Warning: LoginForm is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Am I doing anything wrong?

import React from 'react';
import { Formik, InjectedFormikProps } from 'formik';
import Yup from 'yup';

interface IValues {
  email: string;
  password: string;
}

interface ILoginFormProps {
  onSubmit(payload: IValues): void;
}

const LoginForm: React.StatelessComponent<
  InjectedFormikProps<ILoginFormProps, IValues>
> = ({ values, handleChange, handleSubmit, errors, error, isSubmitting }) =>
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      name="email"
      value={values.email}
      onChange={handleChange}
      placeholder="[e-mail]"
    />
    {errors.email &&
      <div>
        {errors.email}
      </div>}
    <input
      type="password"
      name="password"
      value={values.password}
      onChange={handleChange}
      placeholder="password"
    />
    {errors.password &&
      <div>
        {errors.password}
      </div>}
    {error &&
      error.message &&
      <div style={{ color: 'red' }}>
        Top Level Error: {error.message}
      </div>}
    <button type="submit" disabled={isSubmitting}>
      Submit
    </button>
  </form>;

export default Formik<ILoginFormProps, IValues, IValues>({
  validationSchema: Yup.object().shape({
    email: Yup.string().email().required(),
    password: Yup.string().required()
  }),

  handleSubmit: (payload, { props, setError, setSubmitting }) => {
    props.onSubmit(payload);
  }
})(LoginForm);

[eonwhite]

You’re never instantiating your values.email and values.password, so your inputs are receiving undefined values, which React interprets to mean the inputs are uncontrolled.

I would suggest implementing (in your Formik implementation) the mapPropsToValues method to ensure that email and password are initiated to empty strings instead of undefined, for example:

mapPropsToValues: (props) => {
  return {
    email: '',
    password: '',
  }
}

(Of course, if you wanted to ensure the form populated with values based on your props, you would do it there as well. I’m setting to empty strings here because your example is a login form, where you want the fields to start empty.)

[coreysnyder]

@balinabbb I totally agree. I’m surprised this hasn’t been addressed with how popular this form library is. This requirement of setting a default value means that your forms have to be incredibly verbose, essentially re-defining your schema on the front-end in a format just for Formik to use. I feel like adding the inputs with the correct names should be enough. And then once you do that, it now attaches a bunch of empty values to your data that gets sent to the API. I basically have to have a method that I pass my data into which gets it ready for formik, and then a second method on submit which cleans all the garbage up. This is tedious.