formik: Switching to v2.0.1 gives TypeScript error

🐛 Bug report

Current Behavior

The following code worked perfectly fine in 2.0.1-rc.12

return (
    <Formik<FormEntity>
        ...
        render={({ resetForm }) => (
            <Form className={classes.form}>
                <TextField
                    name="name"
                    type="text"
                    label="Name"
                    margin="normal"
                    fullWidth
                />

                ...
            </Form>
        )}
    />
);

However, switching to version 2.0.1 gives the following TypeScript error:

Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'.  TS2322

    119 |                 }}
    120 |                 render={({ resetForm }) => (
  > 121 |                     <Form className={classes.form}>
        |                      ^
    122 |                         <TextField
    123 |                             name="name"
    124 |                             type="text"

Expected behavior

No TypeScript error when moving to v2.0.1. I can’t find this as being a breaking change in the release notes.

Your environment

Software	Version(s)
Formik	2.0.1
React	16.11.0
TypeScript	3.6.4
Browser
npm/Yarn
Operating System

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 8
Comments: 16 (4 by maintainers)

Most upvoted comments

I am also seeing the same original issue on <Form>:

TypeScript error in /Users/narbhati/projects/slidesup/src/components/AdminConfDays/DayForm.tsx(121,22):
Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'.  TS2322

    119 |                 }}
    120 |                 render={({ resetForm }) => (
  > 121 |                     <Form className={classes.form}>
        |                      ^
    122 |                         <TextField
    123 |                             name="name"
    124 |                             type="text"

+12

nareshbhatia on Oct 27, 2019

@jaredpalmer using 2.1.1 results in the typescript error. I checked typescript example from docs:

formik 2.1.1 typescript 3.5.3

Error:(28, 12) TS2739: Type '{ children: Element; }' is missing the following properties from type 'Pick<DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "children" | "style" | "title" | "className" | "acceptCharset" | "action" | "autoComplete" | ... 255 more ... | "key">': translate, onAuxClick, onAuxClickCapture

import * as React from 'react';
import {
  Formik,
  FormikHelpers,
  FormikProps,
  Form,
  Field,
  FieldProps,
} from 'formik';

interface MyFormValues {
  firstName: string;
}

export const MyApp: React.FC<{}> = () => {
  const initialValues: MyFormValues = { firstName: '' };
  return (
    <div>
      <h1>My Example</h1>
      <Formik
        initialValues={initialValues}
        onSubmit={(values, actions) => {
          console.log({ values, actions });
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }}
        render={formikBag => (
          <Form>
            <Field
              name="firstName"
              render={({ field, form, meta }) => (
                <div>
                  <input type="text" {...field} placeholder="First Name" />
                  {meta.touched && meta.error && meta.error}
                </div>
              )}
            />
          </Form>
        )}
      />
    </div>
  );
};

loelsonk on Jan 9, 2020

I’m also still getting this error using 2.0.2

nathan-charles on Oct 28, 2019

@jaredpalmer I’m still seeing this issue in 2.0.2…

Type ‘{ children: Element[]; }’ has no properties in common with type ‘IntrinsicAttributes & RefAttributes<HTMLFormElement>’.

mwarger on Oct 27, 2019

Yeah, just tested it locally, it is solved in 2.0.3, thanks!

rogerpadilla on Oct 28, 2019

Should be fixed in 2.0.2

jaredpalmer on Oct 27, 2019

@jaredpalmer, looks like you have published 2.0.3 to address this issue. Will try ii as soon as I get a chance. FYI, if anyone else wants to give it a try.

nareshbhatia on Oct 28, 2019