Formik: [Question] Compatibility with preact/preact-compat

[matthewlynch]

Hello,

I'm using formik in a project that uses preact with preact-compat (preact-cli). I noticed that issue #16 says preact is supported.

It looks like formik is returning <undefined /> (when looking in React devtools).

I've had a look at the example on codesandbox as well look through the current/closed issues but I can't see what I am doing incorrectly 😟.

Here is the code I'm trying to use:

import { h } from 'preact';
import { Formik } from 'formik';
import yup from 'yup';

const Input = ({ id, name, label, type, value, onChange, error }) => (
  <div>
    <label for={id} style={{ display: 'block' }}>
      {label}
    </label>
    <input
      id={id}
      name={name}
      type={type}
      value={value}
      onChange={onChange}
    />
    {error && (
      <div style={{ color: 'red' }}>
        {error}
      </div>
    )}
  </div>
);

const PersonalDetailsForm = ({ values, handleChange, handleSubmit, errors }) => (
  <form onSubmit={handleSubmit}>
    <Input
      id="email"
      name="email"
      label="Email"
      type="text"
      value={values.email}
      onChange={handleChange}
      error={errors.email}
    />

    <Input
      id="firstName"
      name="firstName"
      label="First name"
      type="text"
      value={values.firstName}
      onChange={handleChange}
      error={errors.firstName}
    />

    <Input
      id="lastName"
      name="lastName"
      label="Last name"
      type="text"
      value={values.lastName}
      onChange={handleChange}
      error={errors.lastName}
    />

    <Input
      id="addressLine1"
      name="addressLine1"
      label="Address line 1"
      type="text"
      value={values.addressLine1}
      onChange={handleChange}
      error={errors.addressLine1}
    />

    <Input
      id="addressLine2"
      name="addressLine2"
      label="Address line 2"
      type="text"
      value={values.addressLine2}
      onChange={handleChange}
      error={errors.addressLine2}
    />

    <Input
      id="addressCity"
      name="addressCity"
      label="City"
      type="text"
      value={values.addressCity}
      onChange={handleChange}
      error={errors.addressCity}
    />

    <Input
      id="addressState"
      name="addressState"
      label="County / State"
      type="text"
      value={values.addressState}
      onChange={handleChange}
      error={errors.addressState}
    />

    <Input
      id="addressZip"
      name="addressZip"
      label="Postcode / Zip"
      type="text"
      value={values.addressZip}
      onChange={handleChange}
      error={errors.addressZip}
    />

    <Input
      id="addressCountry"
      name="addressCountry"
      label="Country"
      type="text"
      value={values.addressCountry}
      onChange={handleChange}
      error={errors.addressCountry}
    />
    <button type="submit" style={{ display: 'block' }}>Submit</button>
  </form>
);

const formikEnhancer = Formik({
  validationSchema: yup.object().shape({
    email: yup.string(),
    firstName: yup.string(),
    lastName: yup.string(),
    addressLine1: yup.string(),
    addressLine2: yup.string(),
    addressCity: yup.string(),
    addressState: yup.string(),
    addressZip: yup.string(),
    addressCountry: yup.string()
  }),
  mapPropsToValues: props => ({
    email: props.email,
    firstName: props.firstName,
    lastName: props.lastName,
    addressLine1: props.addressLine1,
    addressLine2: props.addressLine2,
    addressCity: props.addressCity,
    addressState: props.addressState,
    addressZip: props.addressZip,
    addressCountry: props.addressCountry
  }),
  handleSubmit: (payload, { props, setError, setSubmitting }) => {
    console.log('submit!');
  }
});

export default formikEnhancer(PersonalDetailsForm);

Thank you in advance.

[jaredpalmer]

Just tested Formik 0.8.4 with Preact using preact-cli (which uses preact-compat). Formik appears to be working perfectly. Are you still having issues?

[matthewlynch]

Hi @jaredpalmer,

The latest version of Formik seems to be working as expected with preact, thank you for taking a look into the issue 👍.