Formik 2 / <Field as> prop

README.md

@@ -47,7 +47,7 @@ Next, in your Formik form component, pass this `<TextField />` component as the
   name="email"
   label="Email"
   type="email"
-+ component={TextField}
++ as={TextField}
 />
 ```
 
@@ -58,7 +58,7 @@ Now you can add any of the Material UI props to the `<Field />` component and `<
   name="email"
   label="Email"
   type="email"
-  component={TextField}
+  as={TextField}
 + margin="normal"
 + fullWidth
 />
@@ -73,7 +73,7 @@ Now you can add any of the Material UI props to the `<Field />` component and `<
 
 - Errors are only displayed on touched/dirty fields
 - Fields are disabled during submission
-- All form state is managed to Formik, so props such as `name`, `onChange` and `value` are excluded from the typescript types. Note: if you are using js this does not prevent you from providing these props but here be dragons.
+- All form state is managed to Formik, so props such as `onChange` and `value` are excluded from the typescript types. Note: if you are using js this does not prevent you from providing these props but here be dragons.
 
 ## Non Goals
 

package.json

@@ -68,7 +68,7 @@
     "eslint-plugin-jest": "^22.7.1",
     "eslint-plugin-react": "^7.14.2",
     "eslint-plugin-react-hooks": "^1.6.1",
-    "formik": "^1.5.7",
+    "formik": "^2.0.1-rc.12",
     "husky": "^1.2.0",
     "jest": "^23.4.2",
     "lerna": "^3.5.1",

src/TextField.tsx

@@ -2,33 +2,41 @@ import * as React from 'react';
 import MuiTextField, {
   TextFieldProps as MuiTextFieldProps,
 } from '@material-ui/core/TextField';
-import { FieldProps, getIn } from 'formik';
+import { FieldProps, FieldConfig, useField } from 'formik';
 
 export type TextFieldProps = FieldProps &
+  FieldConfig &
   Omit<MuiTextFieldProps, 'error' | 'name' | 'onChange' | 'value'> & {
     // Fix for the type for variant which is using union
     // https://stackoverflow.com/questions/55664421
     variant: 'standard' | 'filled' | 'outlined' | undefined;
   };
 
 export const fieldToTextField = ({
-  field,
+  name,
   form,
   disabled,
   ...props
 }: TextFieldProps): MuiTextFieldProps => {
-  const { name } = field;
-  const { touched, errors, isSubmitting } = form;
+  if (name === undefined)
+    throw TypeError(
+      'Missing required name attribute on <Field />. This is needed to hook up your @material-ui Text field with Formik.'
+    );
+  if (props.component)
+    throw TypeError(
+      '<Field component> is deprecated in favour of <Field as>. This is needed to hook up your @material-ui Text field with Formik.'
+    );
 
-  const fieldError = getIn(errors, name);
-  const showError = getIn(touched, name) && !!fieldError;
+  const [field, meta] = useField(name);
+  const { touched, error } = meta;
+  const showError = touched && !!error;
 
   return {
-    ...props,
     ...field,
+    ...props,
     error: showError,
     helperText: showError ? fieldError : props.helperText,
-    disabled: disabled ?? isSubmitting,
+    disabled: disabled ?? isSubmitting
   };
 };
 

src/__tests__/Checkbox.test.tsx

@@ -6,7 +6,7 @@ import { Checkbox } from '../Checkbox';
 
 test('Checkbox Renders Correctly', () => {
   const component = renderer.create(
-    <Formik initialValues={{}} onSubmit={() => null}>
+    <Formik initialValues={{}} onSubmit={() => {}}>
       <Form>
         <Field name="test" label="Checkbox" component={Checkbox} />
       </Form>

src/__tests__/InputBase.test.tsx

@@ -6,7 +6,7 @@ import { InputBase } from '../InputBase';
 
 test('InputBase Renders Correctly', () => {
   const component = renderer.create(
-    <Formik onSubmit={() => null} initialValues={{ test: 'Input' }}>
+    <Formik onSubmit={() => {}} initialValues={{ test: 'Input' }}>
       <Form>
         <Field name="test" label="InputBase" component={InputBase} />
       </Form>

src/__tests__/RadioGroup.test.tsx

@@ -7,7 +7,7 @@ import { RadioGroup } from '../RadioGroup';
 
 test('Radio Group Renders Correctly', () => {
   const component = renderer.create(
-    <Formik onSubmit={() => null} initialValues={{ test: '' }}>
+    <Formik onSubmit={() => {}} initialValues={{ test: '' }}>
       <Form>
         <Field name="radio-group" label="Radio Group" component={RadioGroup}>
           <FormControlLabel

src/__tests__/Select.test.tsx

@@ -7,7 +7,7 @@ import { Select } from '../Select';
 
 test('Select Renders Correctly', () => {
   const component = renderer.create(
-    <Formik onSubmit={() => null} initialValues={{ test: '' }}>
+    <Formik onSubmit={() => {}} initialValues={{ test: '' }}>
       <Form>
         <Field name="test" label="Select" component={Select}>
           <MenuItem value="">

src/__tests__/SimpleFileUpload.test.tsx

@@ -6,7 +6,7 @@ import { SimpleFileUpload } from '../SimpleFileUpload';
 
 test('SimpleFileUpload Renders Correctly', () => {
   const component = renderer.create(
-    <Formik onSubmit={() => null} initialValues={{ test: '' }}>
+    <Formik onSubmit={() => {}} initialValues={{ test: '' }}>
       <Form>
         <Field name="test" label="Select" component={SimpleFileUpload} />
       </Form>

src/__tests__/Switch.test.tsx

@@ -6,7 +6,7 @@ import { Switch } from '../Switch';
 
 test('Switch Renders Correctly', () => {
   const component = renderer.create(
-    <Formik initialValues={{}} onSubmit={() => null}>
+    <Formik initialValues={{}} onSubmit={() => {}}>
       <Form>
         <Field name="test" label="Text" component={Switch} />
       </Form>

src/__tests__/TextField.test.tsx

@@ -6,9 +6,9 @@ import { TextField, TextFieldProps } from '../TextField';
 
 test('TextField Renders Correctly', () => {
   const component = renderer.create(
-    <Formik initialValues={{}} onSubmit={() => null}>
+    <Formik initialValues={{}} onSubmit={() => {}}>
       <Form>
-        <Field name="test" label="Text" component={TextField} />
+        <Field name="test" label="Text" as={TextField} />
       </Form>
     </Formik>
   );
@@ -22,9 +22,9 @@ test('Wrapped TextField', () => {
   );
 
   const component = renderer.create(
-    <Formik initialValues={{}} onSubmit={() => null}>
+    <Formik initialValues={{}} onSubmit={() => {}}>
       <Form>
-        <Field name="test" label="Text" component={TextFieldComponent} />
+        <Field name="test" label="Text" as={TextFieldComponent} />
       </Form>
     </Formik>
   );

src/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Checkbox Renders Correctly 1`] = `
 <form
+  action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >

src/__tests__/__snapshots__/InputBase.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`InputBase Renders Correctly 1`] = `
 <form
+  action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >

src/__tests__/__snapshots__/RadioGroup.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Radio Group Renders Correctly 1`] = `
 <form
+  action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >

src/__tests__/__snapshots__/Select.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Select Renders Correctly 1`] = `
 <form
+  action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >

src/__tests__/__snapshots__/SimpleFileUpload.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`SimpleFileUpload Renders Correctly 1`] = `
 <form
+  action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >

src/__tests__/__snapshots__/Switch.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Switch Renders Correctly 1`] = `
 <form
+  action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >

src/__tests__/__snapshots__/TextField.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`TextField Renders Correctly 1`] = `
 <form
+  action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
@@ -38,6 +39,7 @@ exports[`TextField Renders Correctly 1`] = `
 
 exports[`Wrapped TextField 1`] = `
 <form
+  action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >

stories/TextField.story.tsx

@@ -87,18 +87,13 @@ export default withStyles(styles)(({ classes }: WithStyles<typeof styles>) => (
       }}
       render={({ submitForm, isSubmitting, values }) => (
         <Form>
-          <Field
-            type="email"
-            label="Email"
-            name="user.email"
-            component={TextField}
-          />
+          <Field type="email" label="Email" name="user.email" as={TextField} />
           <br />
           <Field
             type="password"
             label="Password"
             name="password"
-            component={TextField}
+            as={TextField}
           />
           <br />
           <br />
@@ -107,15 +102,15 @@ export default withStyles(styles)(({ classes }: WithStyles<typeof styles>) => (
             name="outlined"
             variant="outlined"
             notched
-            component={TextField}
+            as={TextField}
           />
           <br />
           <Field
             label="Outlined"
             name="outlined"
             variant="standard"
             notched
-            component={TextField}
+            as={TextField}
           />
           <br />
           <Field
@@ -124,13 +119,14 @@ export default withStyles(styles)(({ classes }: WithStyles<typeof styles>) => (
             label="With Select"
             select
             SelectProps={{
+              name: 'select',
               MenuProps: {
                 className: classes.menu,
               },
             }}
             helperText="Please select Range"
             margin="normal"
-            component={TextField}
+            as={TextField}
           >
             {ranges.map(option => (
               <MenuItem key={option.value} value={option.value}>