Add Formik Connected Components as a react til

Author: jbranchaud

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)

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).