Update field.md (#2228)

According to documentation using render prop is also deprecated on Formik component itself.
jaredpalmer · Jan 24, 2020 · 31a5d05 · 31a5d05
1 parent 1e051a7
commit 31a5d05
Showing 1 changed file with 41 additions and 42 deletions.
diff --git a/docs/api/field.md b/docs/api/field.md
@@ -33,52 +33,51 @@ There are 2 ways to render things with `<Field>`.
 
 ```jsx
 import React from 'react';
-import { Formik, Field, Form } from 'formik';
+import {Field, Form, Formik, FormikProps} from 'formik';
 
-const MyInput = ({ field, form, ...props }) => {
-  return <input {...field} {...props} />;
+const MyInput = ({field, form, ...props}) => {
+    return <input {...field} {...props} />;
 };
 
 const Example = () => (
-  <div>
-    <h1>My Form</h1>
-    <Formik
-      initialValues={{ email: '', color: 'red', firstName: '', lastName: '' }}
-      onSubmit={(values, actions) => {
-        setTimeout(() => {
-          alert(JSON.stringify(values, null, 2));
-          actions.setSubmitting(false);
-        }, 1000);
-      }}
-      render={(props: FormikProps<Values>) => (
-        <Form>
-          <Field type="email" name="email" placeholder="Email" />
-          <Field as="select" name="color">
-            <option value="red">Red</option>
-            <option value="green">Green</option>
-            <option value="blue">Blue</option>
-          </Field>
-
-          <Field name="lastName">
-            {({
-              field, // { name, value, onChange, onBlur }
-              form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
-              meta,
-            }) => (
-              <div>
-                <input type="text" placeholder="Email" {...field} />
-                {meta.touched && meta.error && (
-                  <div className="error">{meta.error}</div>
-                )}
-              </div>
-            )}
-          </Field>
-          <Field name="lastName" placeholder="Doe" component={MyInput} />
-          <button type="submit">Submit</button>
-        </Form>
-      )}
-    />
-  </div>
+    <div>
+        <h1>My Form</h1>
+        <Formik
+            initialValues={{email: '', color: 'red', firstName: '', lastName: ''}}
+            onSubmit={(values, actions) => {
+                setTimeout(() => {
+                    alert(JSON.stringify(values, null, 2));
+                    actions.setSubmitting(false);
+                }, 1000);
+            }}>{(props: FormikProps<any>) => (
+            <Form>
+                <Field type="email" name="email" placeholder="Email"/>
+                <Field as="select" name="color">
+                    <option value="red">Red</option>
+                    <option value="green">Green</option>
+                    <option value="blue">Blue</option>
+                </Field>
+
+                <Field name="lastName">
+                    {({
+                          field, // { name, value, onChange, onBlur }
+                          form: {touched, errors}, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
+                          meta,
+                      }) => (
+                        <div>
+                            <input type="text" placeholder="Email" {...field} />
+                            {meta.touched && meta.error && (
+                                <div className="error">{meta.error}</div>
+                            )}
+                        </div>
+                    )}
+                </Field>
+                <Field name="lastName" placeholder="Doe" component={MyInput}/>
+                <button type="submit">Submit</button>
+            </Form>
+        )}
+        </Formik>
+    </div>
 );
 ```