From 52eb7123cb87fea63fe82fb3856a307f179a9e5e Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Sat, 25 May 2019 16:19:57 -0500
Subject: [PATCH] Add Formik Connected Components as a react til

---
 README.md                            |  3 ++-
 react/formik-connected-components.md | 38 ++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 react/formik-connected-components.md

diff --git a/README.md b/README.md
index 7572e3c..8e3ab7f 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_814 TILs and counting..._
+_815 TILs and counting..._
 
 ---
 
@@ -544,6 +544,7 @@ _814 TILs and counting..._
 - [Enforce Specific Values With PropTypes](react/enforce-specific-values-with-proptypes.md)
 - [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
 - [Forcing A Child Remount With The Key Prop](react/forcing-a-child-remount-with-the-key-prop.md)
+- [Formik Connected Components](react/formik-connected-components.md)
 - [Formik's Validation Schema As A Function](react/formiks-validation-schema-as-a-function.md)
 - [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md)
 - [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
diff --git a/react/formik-connected-components.md b/react/formik-connected-components.md
new file mode 100644
index 0000000..bb52466
--- /dev/null
+++ b/react/formik-connected-components.md
@@ -0,0 +1,38 @@
+# Formik Connected Components
+
+Formik comes with a `connect()` HOC that uses the context API as a way of
+connecting to disparate form elements. This means that form data, change
+handlers, touched and error data, etc. can be easily accessed without a lot of
+[prop drilling](https://kentcdodds.com/blog/prop-drilling).
+
+Any component that lives somewhere downstream in the tree of a Formik form can
+use `connect()`.
+
+```javascript
+import { connect, getIn } from "formik";
+
+const Input = ({ type = "text", name, id, label, formik }) => {
+  return (
+    <React.Fragment>
+      <label htmlFor={name}>{label}:</label>{" "}
+      <input
+        type={type}
+        onChange={formik.handleChange}
+        onBlur={formik.handleBlur}
+        value={getIn(formik.values, name)}
+        name={name}
+        id={id}
+      />
+    </React.Fragment>
+  );
+};
+
+export default connect(Input);
+```
+
+This `Input` component is wrapped in `connect` which means it gets the `formik`
+prop which contains everything that we mentioned and more -- all the context
+you'll need to make your form element work.
+
+You can play around with it using this [live
+example](https://codesandbox.io/s/quizzical-hill-7xlwi).